<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>JavaScript 总结 | 净土</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="JavaScript 总结，涉及变量，数据类型，操作符，语句，函数，模块，错误处理，垃圾回收，面向对象编程，原生类型，异步编程；声明提升，typeof，对象的类定义，undefined &amp; null，类型转换，Symbol，Number，模板字符串，标签模板，ES6中的`...`，解构赋值，for-in，with，for-of，函数声明和表达式，arguments，this，函数返回值，默认参数，">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript 总结">
<meta property="og:url" content="http://howiefh.github.io/2015/09/01/javascript-summary/index.html">
<meta property="og:site_name" content="净土">
<meta property="og:description" content="JavaScript 总结，涉及变量，数据类型，操作符，语句，函数，模块，错误处理，垃圾回收，面向对象编程，原生类型，异步编程；声明提升，typeof，对象的类定义，undefined &amp; null，类型转换，Symbol，Number，模板字符串，标签模板，ES6中的`...`，解构赋值，for-in，with，for-of，函数声明和表达式，arguments，this，函数返回值，默认参数，">
<meta property="og:image" content="http://fh-1.qiniudn.com/jsobj.jpg">
<meta property="og:updated_time" content="2015-09-01T04:05:51.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript 总结">
<meta name="twitter:description" content="JavaScript 总结，涉及变量，数据类型，操作符，语句，函数，模块，错误处理，垃圾回收，面向对象编程，原生类型，异步编程；声明提升，typeof，对象的类定义，undefined &amp; null，类型转换，Symbol，Number，模板字符串，标签模板，ES6中的`...`，解构赋值，for-in，with，for-of，函数声明和表达式，arguments，this，函数返回值，默认参数，">
  
    <link rel="alternative" href="/atom.xml" title="净土" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico">
  
  <link href="http://fonts.useso.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css" type="text/css">
  
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-40492061-1', 'auto');
ga('send', 'pageview');

</script>


  
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?56d2899c5e919fbf4a7b00de5d1c31dd";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">净土</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">乐不在外而在心，心以为乐，则是境皆乐；心以为苦，则无境不苦。</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-github-link" class="nav-icon" href="https://github.com/howiefh" title="Github" target="_blank"></a>
        
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed" target="_blank"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://howiefh.github.io"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-javascript-summary" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    
<a href="/2015/09/01/javascript-summary/" class="article-date">
  <time datetime="2015-09-01T02:22:17.000Z" itemprop="datePublished">2015-09-01</time>
</a>


    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      JavaScript 总结
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
		
		<div id="toc" class="toc-article">
			<h2 class="toc-title"><span>Contents</span></h2>
		
			<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#变量"><span class="toc-number">1.</span> <span class="toc-text">变量</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#声明提升"><span class="toc-number">1.1.</span> <span class="toc-text">声明提升</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#数据类型"><span class="toc-number">2.</span> <span class="toc-text">数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#typeof"><span class="toc-number">2.1.</span> <span class="toc-text">typeof</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对象的类定义"><span class="toc-number">2.2.</span> <span class="toc-text">对象的类定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#undefined_&_null"><span class="toc-number">2.3.</span> <span class="toc-text">undefined & null</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#类型转换"><span class="toc-number">2.4.</span> <span class="toc-text">类型转换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Symbol"><span class="toc-number">2.5.</span> <span class="toc-text">Symbol</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Number"><span class="toc-number">2.6.</span> <span class="toc-text">Number</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#模板字符串"><span class="toc-number">2.7.</span> <span class="toc-text">模板字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#标签模板"><span class="toc-number">2.8.</span> <span class="toc-text">标签模板</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#操作符"><span class="toc-number">3.</span> <span class="toc-text">操作符</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6中的-"><span class="toc-number">3.1.</span> <span class="toc-text">ES6中的...</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#解构赋值"><span class="toc-number">3.2.</span> <span class="toc-text">解构赋值</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#语句"><span class="toc-number">4.</span> <span class="toc-text">语句</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#for-in"><span class="toc-number">4.1.</span> <span class="toc-text">for-in</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#with"><span class="toc-number">4.2.</span> <span class="toc-text">with</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#函数"><span class="toc-number">5.</span> <span class="toc-text">函数</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#函数声明和表达式"><span class="toc-number">5.1.</span> <span class="toc-text">函数声明和表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#没有重载"><span class="toc-number">5.2.</span> <span class="toc-text">没有重载</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#作为值的函数"><span class="toc-number">5.3.</span> <span class="toc-text">作为值的函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#arguments"><span class="toc-number">5.4.</span> <span class="toc-text">arguments</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this"><span class="toc-number">5.5.</span> <span class="toc-text">this</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#返回值"><span class="toc-number">5.6.</span> <span class="toc-text">返回值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#默认参数"><span class="toc-number">5.7.</span> <span class="toc-text">默认参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#rest参数"><span class="toc-number">5.8.</span> <span class="toc-text">rest参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#扩展运算符"><span class="toc-number">5.9.</span> <span class="toc-text">扩展运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#箭头函数"><span class="toc-number">5.10.</span> <span class="toc-text">箭头函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Generator_函数"><span class="toc-number">5.11.</span> <span class="toc-text">Generator 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#尾调用优化"><span class="toc-number">5.12.</span> <span class="toc-text">尾调用优化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#作用域"><span class="toc-number">5.13.</span> <span class="toc-text">作用域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#闭包"><span class="toc-number">5.14.</span> <span class="toc-text">闭包</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#模块"><span class="toc-number">6.</span> <span class="toc-text">模块</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#错误处理"><span class="toc-number">7.</span> <span class="toc-text">错误处理</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#垃圾回收"><span class="toc-number">8.</span> <span class="toc-text">垃圾回收</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#面向对象编程"><span class="toc-number">9.</span> <span class="toc-text">面向对象编程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#对象"><span class="toc-number">9.1.</span> <span class="toc-text">对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#属性类型"><span class="toc-number">9.1.1.</span> <span class="toc-text">属性类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对象使用和属性"><span class="toc-number">9.1.2.</span> <span class="toc-text">对象使用和属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#原型"><span class="toc-number">9.1.3.</span> <span class="toc-text">原型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建对象"><span class="toc-number">9.1.4.</span> <span class="toc-text">创建对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#class"><span class="toc-number">9.1.5.</span> <span class="toc-text">class</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#静态私有变量"><span class="toc-number">9.1.6.</span> <span class="toc-text">静态私有变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#模块模式"><span class="toc-number">9.1.7.</span> <span class="toc-text">模块模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#增强的模块模式"><span class="toc-number">9.1.8.</span> <span class="toc-text">增强的模块模式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#继承"><span class="toc-number">9.2.</span> <span class="toc-text">继承</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#原型链"><span class="toc-number">9.2.1.</span> <span class="toc-text">原型链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#继承方法"><span class="toc-number">9.2.2.</span> <span class="toc-text">继承方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#extends"><span class="toc-number">9.2.3.</span> <span class="toc-text">extends</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#原生类型"><span class="toc-number">10.</span> <span class="toc-text">原生类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Object"><span class="toc-number">10.1.</span> <span class="toc-text">Object</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array"><span class="toc-number">10.2.</span> <span class="toc-text">Array</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Date"><span class="toc-number">10.3.</span> <span class="toc-text">Date</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RegExp"><span class="toc-number">10.4.</span> <span class="toc-text">RegExp</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Function"><span class="toc-number">10.5.</span> <span class="toc-text">Function</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Boolean"><span class="toc-number">10.6.</span> <span class="toc-text">Boolean</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Number-1"><span class="toc-number">10.7.</span> <span class="toc-text">Number</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#String"><span class="toc-number">10.8.</span> <span class="toc-text">String</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Global"><span class="toc-number">10.9.</span> <span class="toc-text">Global</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Math"><span class="toc-number">10.10.</span> <span class="toc-text">Math</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Map"><span class="toc-number">10.11.</span> <span class="toc-text">Map</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WeakMap"><span class="toc-number">10.12.</span> <span class="toc-text">WeakMap</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Set"><span class="toc-number">10.13.</span> <span class="toc-text">Set</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WeakSet"><span class="toc-number">10.14.</span> <span class="toc-text">WeakSet</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Proxy"><span class="toc-number">10.15.</span> <span class="toc-text">Proxy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Reflect"><span class="toc-number">10.16.</span> <span class="toc-text">Reflect</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Promise"><span class="toc-number">10.17.</span> <span class="toc-text">Promise</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#异步编程"><span class="toc-number">11.</span> <span class="toc-text">异步编程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#异步基本概念"><span class="toc-number">11.1.</span> <span class="toc-text">异步基本概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#回调函数"><span class="toc-number">11.2.</span> <span class="toc-text">回调函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Promise-1"><span class="toc-number">11.3.</span> <span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#async函数"><span class="toc-number">11.4.</span> <span class="toc-text">async函数</span></a></li></ol></li></ol>
		
		</div>
		
        <p>这篇是对前面<a href="2015/08/28/javascript-grammar/">JavaScript 基本语法</a>，<a href="2015/08/28/javascript-reference-type/">JavaScript 引用类型</a>，<a href="2015/08/28/javascript-oop-function-expression-and-async/">JavaScript 面向对象程序设计、函数表达式和异步编程</a>三篇笔记的总结。</p>
<a id="more"></a>
<h1 id="变量">变量</h1><p>有三个关键字可以用于声明变量：var,let,const。后面两个是ES6新加的。如果没有使用任何关键字，变量是全局变量（不推荐）。</p>
<p>var 声明的变量会被提升到当前作用域的最前面，它的作用域范围也就是当前作用域，即使它是在语句块中声明。</p>
<p>let、const 声明的变量会绑定当前语句块（暂时性死区，temporal dead zone，简称TDZ），被声明之后才可以使用。只在声明所在的块级作用域内有效；不存在“变量提升“现象，只能在声明的位置后面使用；也不可重复声明。不同的是const声明之后不可变，如果声明的是对象，不能再指向另一个对象，但是对象属性可以变。使用Object.freeze方法可以使对象属性也不可变。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">//if中的声明语句会被提升到这里</span></span><br><span class="line">  <span class="comment">//var a;</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="literal">false</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  a = <span class="number">10</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(a);<span class="comment">//10</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(b); <span class="comment">//ReferenceError: can't access lexical declaration `b' before initialization</span></span><br><span class="line">    <span class="keyword">let</span> b = <span class="number">2</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(b); <span class="comment">//ReferenceError: b is not defined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">baz</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="keyword">const</span> c = <span class="number">2</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(c); <span class="comment">//ReferenceError: c is not defined</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>ES6规定，var和function声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。</p>
<h2 id="声明提升">声明提升</h2><p>var 声明的变量，function声明的函数会被提升到当前作用域顶端。只有声明才会提升，表达式不会。</p>
<h1 id="数据类型">数据类型</h1><p>共有七种数据类型：Undefined, Null, Boolean, String, Symbol, Number和Object.</p>
<p>前六种是简单（基本）数据类型，其中Boolean, String, Number有基本包装类型，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象</p>
<p>ES6新加了Symbol类型，是一种特殊的、不可变的数据类型，可以作为对象属性的标识符使用。</p>
<h2 id="typeof">typeof</h2><ul>
<li>“undefined” 如果这个值未定义</li>
<li>“boolean” 如果这个值是布尔值</li>
<li>“string” 如果这个值是字符串</li>
<li>“number” 如果这个值是数值</li>
<li>“object” 如果这个值是对象或者null</li>
<li>“function” 如果这个值是函数</li>
<li>“symbol” 如果这个值是Symbol类型（ES6新增）</li>
</ul>
<p>实际上JavaScript中函数也是对象。</p>
<p>大体上来说,基本类型的值应该使用 typeof 来检测,而对象的值则应该使用 instanceof 来检测。</p>
<h2 id="对象的类定义">对象的类定义</h2><p>JavaScript 标准文档只给出了一种获取 [[Class]] 值的方法，那就是使用 Object.prototype.toString。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">is</span>(<span class="params">type, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> clas = <span class="built_in">Object</span>.prototype.toString.call(obj).slice(<span class="number">8</span>, -<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">return</span> obj !== <span class="literal">undefined</span> &amp;&amp; obj !== <span class="literal">null</span> &amp;&amp; clas === type;</span><br><span class="line">&#125;</span><br><span class="line">is(<span class="string">'String'</span>, <span class="string">'test'</span>); <span class="comment">// true</span></span><br><span class="line">is(<span class="string">'String'</span>, <span class="keyword">new</span> <span class="built_in">String</span>(<span class="string">'test'</span>)); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>上面例子中，Object.prototype.toString 方法被调用，this 被设置为了需要获取 [[Class]] 值的对象。</p>
<p>Object.prototype.toString 返回一种标准格式字符串，所以上例可以通过 slice 截取指定位置的字符串，如下所示：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.prototype.toString.call([])    <span class="comment">// "[object Array]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(&#123;&#125;)    <span class="comment">// "[object Object]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="number">2</span>)    <span class="comment">// "[object Number]"</span></span><br></pre></td></tr></table></figure></p>
<h2 id="undefined_&amp;_null">undefined &amp; null</h2><p>这两种类型分别都只有一个值，分别是undefined和null。</p>
<p>未声明的变量或声明后没有初始化的变量都是undefined的，typeof会返回undefined。全局变量中有undefined变量，其值也是undefined。函数中没有定义return或return没有显示返回任何内容时返回值会是undefined。函数参数没有显示传递值也会是undefined。</p>
<p>null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测 null 值时会返回”object”的原因</p>
<p>实际上，undefined值是派生自null值的，<code>null == undefined</code>将会返回true。</p>
<h2 id="类型转换">类型转换</h2><p>在使用相等(==)和不相等(!=)操作符,或者在 if 、 for 及 while 等流控制语句中使用非布尔值时, 最常发生类型转换。避免隐式类型转换，可能会带来不期望的结果。尽量使用<code>===</code>,<code>!==</code>替代<code>==</code>,<code>!=</code>。</p>
<p>最好是使用显示类型转换，如下<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//转为数值</span></span><br><span class="line"><span class="keyword">var</span> n1 = +<span class="string">'123'</span>; <span class="comment">//123 和下面等效</span></span><br><span class="line"><span class="keyword">var</span> n2 = <span class="built_in">Number</span>(<span class="string">'123'</span>); <span class="comment">//123</span></span><br><span class="line"><span class="keyword">var</span> n3 = <span class="built_in">parseInt</span>(<span class="string">'123.3blue'</span>); <span class="comment">//123</span></span><br><span class="line"><span class="keyword">var</span> n4 = <span class="built_in">parseInt</span>(<span class="string">'blue123'</span>); <span class="comment">//NaN</span></span><br><span class="line"><span class="keyword">var</span> n5 = <span class="built_in">parseInt</span>(<span class="string">'0123.23'</span>, <span class="number">8</span>); <span class="comment">//83</span></span><br><span class="line"><span class="keyword">var</span> n6 = <span class="built_in">parseFloat</span>(<span class="string">'123.23.12blue'</span>); <span class="comment">//123.23</span></span><br><span class="line"><span class="comment">//转为字符串</span></span><br><span class="line"><span class="keyword">var</span> s1 = <span class="string">''</span> + <span class="number">123</span>; <span class="comment">//"123" 和下面等效</span></span><br><span class="line"><span class="keyword">var</span> s2 = <span class="built_in">String</span>(<span class="number">123</span>);<span class="comment">//"123"</span></span><br><span class="line"><span class="comment">//转为布尔值</span></span><br><span class="line"><span class="keyword">var</span> b1 = !!<span class="string">'123'</span>;<span class="comment">//true 和下面等效</span></span><br><span class="line"><span class="keyword">var</span> b3 = <span class="built_in">Boolean</span>(<span class="string">'123'</span>);<span class="comment">//true</span></span><br></pre></td></tr></table></figure></p>
<p>技巧<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">''</span> + <span class="number">10</span> === <span class="string">'10'</span>; <span class="comment">// true</span></span><br><span class="line">+<span class="string">'10'</span> === <span class="number">10</span>; <span class="comment">// true</span></span><br><span class="line">!!<span class="string">'foo'</span>;   <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p>
<p>内置类型（比如 Number 和 String）的构造函数在被调用时，使用或者不使用 new 的结果完全不同。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Number</span>(<span class="number">10</span>) === <span class="number">10</span>;     <span class="comment">// false, 对象与数字的比较</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="number">10</span>) === <span class="number">10</span>;         <span class="comment">// true, 数字与数字的比较</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Number</span>(<span class="number">10</span>) + <span class="number">0</span> === <span class="number">10</span>; <span class="comment">// true, 由于隐式的类型转换</span></span><br></pre></td></tr></table></figure>
<p>布尔类型转换规则</p>
<table>
<thead>
<tr>
<th>数据类型</th>
<th>转换为true的值</th>
<th>转换为false的值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Boolean</td>
<td>true</td>
<td>false</td>
</tr>
<tr>
<td>String</td>
<td>非空字符串</td>
<td>“”</td>
</tr>
<tr>
<td>Number</td>
<td>非零数字值（包括无穷大）</td>
<td>0和NaN</td>
</tr>
<tr>
<td>Object</td>
<td>任何对象</td>
<td>null</td>
</tr>
<tr>
<td>Undefined</td>
<td>n/a（不适用）</td>
<td>undefined</td>
</tr>
</tbody>
</table>
<h2 id="Symbol">Symbol</h2><p>Symbol，表示独一无二的值。对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的Symbol类型。凡是属性名属于Symbol类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。</p>
<p>Symbol 不可以使用new关键字，Symbol函数可以接受字符串参数使其返回值容易被区分，只是作为描述，即使参数相同Symbol函数返回值也不等。</p>
<p>Symbol值作为对象属性名时，不能用点运算符。同理，在对象的内部，使用Symbol值定义属性时，Symbol值必须放在方括号之中。</p>
<p>Symbol作为属性名，该属性不会出现在for…in、for…of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有Symbol属性名。</p>
<p>Symbol.for方法接受一个字符串作为参数，然后搜索有没有以该参数作为名称的Symbol值。如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值。注意，Symbol函数是总是返回新的值。</p>
<p>Symbol.keyFor方法返回一个已登记的Symbol类型值的key。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="built_in">Symbol</span>(<span class="string">'foo'</span>);</span><br><span class="line"><span class="keyword">var</span> b = <span class="built_in">Symbol</span>(<span class="string">'foo'</span>);</span><br><span class="line"><span class="keyword">var</span> s1 = <span class="built_in">Symbol</span>.for(<span class="string">'foo'</span>);</span><br><span class="line"><span class="keyword">var</span> s2 = <span class="built_in">Symbol</span>.for(<span class="string">'foo'</span>);</span><br><span class="line">s1 === s2 <span class="comment">// true</span></span><br><span class="line">a === b <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line">a === s2 <span class="comment">// false</span></span><br><span class="line"><span class="built_in">Symbol</span>.keyFor(s1) <span class="comment">// "foo"</span></span><br><span class="line"><span class="built_in">Symbol</span>.keyFor(a) <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>
<p>除了定义自己使用的Symbol值以外，ES6还提供一些内置的Symbol值：对象的Symbol.hasInstance属性，对象的Symbol.iterator属性等等。</p>
<h2 id="Number">Number</h2><p>最小数值和最大数值分别为Number.MIN_VALUE，Number.MAX_VALUE</p>
<p>NaN，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以0都会导致错误，从而停止代码执行。但在ECMAScript中，0除以0会返回NaN，正数除以0返回Infinity，负数除以0返回-Infinity，因此不会影响其他代码的执行。 NaN本身有两个非同寻常的特点。首先，任何涉及 NaN 的操作（例如 NaN/10）都会返回 NaN，这个特点在多步计算中有可能导致问题。其次，NaN与任何值都不相等，包括NaN本身</p>
<p>ES6提供了二进制和八进制数值的新的写法，分别用前缀0b和0o表示。</p>
<h2 id="模板字符串">模板字符串</h2><p>模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，需要将变量名写在<code>${}</code>之中。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 普通字符串</span></span><br><span class="line"><span class="string">`In JavaScript '\n' is a line-feed.`</span></span><br><span class="line"><span class="comment">// 多行字符串</span></span><br><span class="line"><span class="string">`In JavaScript this is</span><br><span class="line"> not legal.`</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`string text line 1</span><br><span class="line">string text line 2`</span>);</span><br><span class="line"><span class="comment">// 字符串中嵌入变量</span></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">"Bob"</span>, time = <span class="string">"today"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`\`Hello <span class="subst">$&#123;name&#125;</span>, how are you <span class="subst">$&#123;time&#125;</span>?\`</span><br><span class="line"><span class="subst">$&#123;'Mr. ' + name&#125;</span></span><br><span class="line">`</span>);</span><br></pre></td></tr></table></figure></p>
<h2 id="标签模板">标签模板</h2><p>模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。</p>
<p>函数tag依次会接收到多个参数。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">tag</span>(<span class="params">stringArr, ...values</span>)</span>&#123; <span class="comment">// ...  &#125;</span></span><br></pre></td></tr></table></figure></p>
<p>tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。</p>
<p>tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。</p>
<p>tag函数所有参数的实际值如下。</p>
<ul>
<li>第一个参数：[‘Hello ‘, ‘ world ‘, ‘’]</li>
<li>第二个参数: 15</li>
<li>第三个参数：50</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">String</span>.raw<span class="string">`Hi\n<span class="subst">$&#123;2+3&#125;</span>!`</span>; <span class="comment">// "Hi\\n5!"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">String</span>.raw<span class="string">`Hi\u000A!`</span>; <span class="comment">// 'Hi\\u000A!'</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">String</span>.raw(&#123; raw: <span class="string">'test'</span> &#125;, <span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>); <span class="comment">// 't0e1s2t'</span></span><br></pre></td></tr></table></figure>
<h1 id="操作符">操作符</h1><p>ECMAScript 操作符的与众不同之处在于，它们能够适用于很多值，例如字符串、数字值、布尔值，甚至对象。不过，在应用于对象时，相应的操作符通常都会调用对象的valueOf()和（或）toString()方法，以便取得可以操作的值。</p>
<ul>
<li>一元操作符(<code>++,--,+,-</code>)<br>  在对非数值应用一元加操作符时，该操作符会像Number()转型函数一样对这个值执行转换。如<code>+&#39;10&#39; === 10 //true</code></li>
<li><p>位操作符(<code>~,&amp;,|,^,&lt;&lt;,&gt;&gt;,&gt;&gt;&gt;</code>)<br>  ECMAScript中的所有数值都以IEEE-754 64位格式存储，但位操作符并不直接操作64位的值。而是先将64位的值转换成32位的整数，然后执行操作，最后再将结果转换回64位。对于开发人员来说，由于64位存储格式是透明的，因此整个过程就像是只存在32位的整数一样。但这个转换过程也导致了一个严重的副效应，即在对特殊的NaN和Infinity值应用位操作时，这两个值都会被当成0来处理</p>
<p>  默认情况下，ECMAScript 中的所有整数都是有符号整数</p>
</li>
<li><p>布尔操作符(<code>!,&amp;&amp;,||</code>)<br>  非操作符对于非布尔值会先将其转换为布尔值在计算。</p>
<p>  与、或操作符，对于非布尔值，可以理解为先将其转为布尔值在计算，但是返回值仍旧是原值而不是转换后的布尔值。如<code>null &amp;&amp; 1</code>可以理解为<code>false &amp;&amp; true</code>。由于短路效应，第一个操作数是false那么就直接将第一个操作数返回，即返回null。再比如<code>NaN || obj</code>可以理解为<code>false || true</code>，短路效应要到表达式的值就是第二个操作数的值，即obj。</p>
</li>
<li><p>乘性操作符(<code>*,/,%</code>)<br>  在操作数为非数值的情况下会执行自动的类型转换。如果参与乘性计算的某个操作数不是数值，后台会先使用Number()转型函数将其转换为数值。也就是说，空字符串将被当作0，布尔值true将被当作1。</p>
<p>  注意<code>0 * Infinity = NaN</code>， <code>Infinity / Infinity = NaN</code>， <code>0 / 0 = NaN</code>， <code>Infinity % 有限大的数值 = NaN</code>， <code>有限大的数值 % 0= NaN</code>， <code>Infinity % Infinity = NaN</code></p>
</li>
<li><p>加性操作符(<code>+,-</code>)<br>  <code>+</code> 如果有操作数是字符串会拼接字符串。拼接时其他类型调用toString()方法</p>
<p>  注意<code>Infinity + (-Infinity) = NaN</code>， <code>Infinity -Infinity = NaN</code>， <code>-Infinity -(-Infinity) = NaN</code></p>
<p>  减法，如果有一个操作数是字符串、布尔值、null或undefined，则先在后台调用Number()函数将其转换为数值，然后再根据前面的规则执行减法计算。如果转换的结果是NaN，则减法的结果就是NaN；如果有一个操作数是对象，则调用对象的valueOf()方法以取得表示该对象的数值。如果得到的值是NaN，则减法的结果就是NaN。如果对象没有valueOf()方法，则调用其toString()方法并将得到的字符串转换为数值。</p>
</li>
<li><p>关系操作符(<code>&gt;,&lt;,&gt;=,&lt;=</code>)<br>  对于字符串实际比较的是两个字符串中对应位置的每个字符的字符编码值</p>
<p>  如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较。</p>
</li>
<li><p>相等操作符(<code>===,!==,==,!=</code>)<br>  <code>==,!=</code> 比较规则</p>
<ul>
<li>如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为1；</li>
<li>如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；</li>
<li>如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较； 这两个操作符在进行比较时则要遵循下列规则。</li>
<li>null和undefined是相等的。</li>
<li>要比较相等性之前，不能将null和undefined转换成其他任何值。</li>
<li>如果有一个操作数是NaN，则相等操作符返回false，而不相等操作符返回true。重要提示：即使两个操作数都是NaN，相等操作符也返回false；因为按照规则，NaN不等于NaN。</li>
<li>如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true；否则，返回false。</li>
</ul>
</li>
<li>条件操作符(<code>boolean_expression?true_value:false_value</code>)</li>
<li>逗号操作符(<code>,</code>)</li>
<li>赋值操作符(<code>=以及*=、+=等复合赋值运算符</code>)</li>
</ul>
<h2 id="ES6中的-">ES6中的<code>...</code></h2><p>rest参数可以在函数参数和解构时使用，<code>...</code>后面的变量是一个数组，可以将一个序列存入这个数组。</p>
<p>扩展操作符可以看作rest参数的逆操作，可以将一个数组转变为一个序列，可以在函数调用和解构时使用。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">...a</span>)</span>&#123;&#125;</span><br><span class="line">foo(...[<span class="number">1</span>,<span class="number">2</span>,<span class="number">4</span>]);</span><br><span class="line"><span class="keyword">var</span> [...a] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">4</span>]; <span class="comment">// a = [1,2,4]</span></span><br><span class="line"><span class="keyword">var</span> [a] = [...[<span class="number">1</span>,<span class="number">2</span>]]; <span class="comment">// a = 1</span></span><br></pre></td></tr></table></figure>
<h2 id="解构赋值">解构赋值</h2><p>ECMAScript6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> [a, b, c] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]; <span class="comment">// a即为1，b为2，c为3</span></span><br><span class="line"><span class="keyword">var</span> [,,third] = [<span class="string">"foo"</span>, <span class="string">"bar"</span>, <span class="string">"baz"</span>];<span class="comment">//third为"baz"</span></span><br><span class="line"><span class="keyword">var</span> [head, ...tail] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]; <span class="comment">//head为1，tail为[2,3,4]</span></span><br><span class="line"><span class="keyword">var</span> [foo, [[bar], baz]] = [<span class="number">1</span>, [[<span class="number">2</span>], <span class="number">3</span>]];</span><br><span class="line"><span class="keyword">var</span> [x = <span class="number">1</span>] = [<span class="literal">undefined</span>];<span class="comment">// x = 1</span></span><br><span class="line"><span class="keyword">var</span> [x = <span class="number">1</span>] = [<span class="literal">null</span>]; <span class="comment">//x = null</span></span><br></pre></td></tr></table></figure>
<p>实际赋值操作符右边只要是实现了Iterable接口的对象就行，所以Set、Map、Generator函数的返回值都可以。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> set = <span class="keyword">new</span> <span class="built_in">Set</span>().add(<span class="string">'a'</span>).add(<span class="string">'b'</span>);</span><br><span class="line"><span class="keyword">var</span> [a, b] = set; <span class="comment">//a = "a",b = "b"</span></span><br></pre></td></tr></table></figure></p>
<p>解构不仅可以用于数组，还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; bar, foo &#125; = &#123; foo: <span class="string">"aaa"</span>, bar: <span class="string">"bbb"</span> &#125;;<span class="comment">//bar = "bbb", foo = "aaa"</span></span><br><span class="line"><span class="keyword">var</span> &#123; baz &#125; = &#123; foo: <span class="string">"aaa"</span>, bar: <span class="string">"bbb"</span> &#125;; <span class="comment">//baz = undefined</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  p: [</span><br><span class="line">    <span class="string">"Hello"</span>,</span><br><span class="line">    &#123; y: <span class="string">"World"</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> &#123; p: [x, &#123; y &#125;] &#125; = obj; <span class="comment">//x = "Hello", y = "World"</span></span><br><span class="line"><span class="comment">//默认值生效的条件是，对象的属性值严格等于undefined。</span></span><br><span class="line"><span class="keyword">var</span> &#123;x = <span class="number">3</span>&#125; = &#123;x: <span class="literal">undefined</span>&#125;; <span class="comment">//x = 3</span></span><br><span class="line"><span class="keyword">var</span> &#123;x = <span class="number">3</span>&#125; = &#123;x: <span class="literal">null</span>&#125;; <span class="comment">//x = null</span></span><br></pre></td></tr></table></figure></p>
<p>如果左边变量名和右边属性名不一致<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; foo: baz &#125; = &#123; foo: <span class="string">"aaa"</span>, bar: <span class="string">"bbb"</span> &#125;; <span class="comment">//baz = "aaa"</span></span><br></pre></td></tr></table></figure></p>
<p>如果要将一个已经声明的变量用于解构赋值，必须非常小心。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 错误的写法</span></span><br><span class="line"><span class="keyword">var</span> x;</span><br><span class="line">&#123;x&#125; = &#123;x:<span class="number">1</span>&#125;; <span class="comment">// SyntaxError: syntax error</span></span><br></pre></td></tr></table></figure></p>
<p>上面代码的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 正确的写法</span></span><br><span class="line">(&#123;x&#125; = &#123;x:<span class="number">1</span>&#125;);</span><br></pre></td></tr></table></figure></p>
<p>对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123; log, sin, cos &#125; = <span class="built_in">Math</span>;</span><br></pre></td></tr></table></figure></p>
<p>函数参数也可以使用解构。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">move</span>(<span class="params">&#123;x = 0, y = 0&#125; = &#123;&#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> [x, y];</span><br><span class="line">&#125;</span><br><span class="line">move(&#123;x: <span class="number">3</span>, y: <span class="number">8</span>&#125;); <span class="comment">// [3, 8]</span></span><br><span class="line">move(&#123;x: <span class="number">3</span>&#125;); <span class="comment">// [3, 0]</span></span><br><span class="line">move(&#123;&#125;); <span class="comment">// [0, 0]</span></span><br><span class="line">move(); <span class="comment">// [0, 0]</span></span><br></pre></td></tr></table></figure></p>
<p>解构的主要应用</p>
<p>1）交换变量的值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[x, y] = [y, x];</span><br></pre></td></tr></table></figure></p>
<p>2）从函数返回多个值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 返回一个数组</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">example</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> [a, b, c] = example(); <span class="comment">//a = 1, b = 2, c = 3</span></span><br></pre></td></tr></table></figure></p>
<p>3）函数参数的定义<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 参数是一组无次序的值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">&#123;x, y, z&#125;</span>) </span>&#123; ... &#125;</span><br><span class="line">f(&#123;x:<span class="number">1</span>, y:<span class="number">2</span>, z:<span class="number">3</span>&#125;)</span><br></pre></td></tr></table></figure></p>
<p>4）提取JSON数据<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> jsonData = &#123;</span><br><span class="line">  id: <span class="number">42</span>,</span><br><span class="line">  data: [<span class="number">867</span>, <span class="number">5309</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> &#123; id, data: number &#125; = jsonData;</span><br><span class="line"><span class="built_in">console</span>.log(id, number) <span class="comment">// 42, [867, 5309]</span></span><br></pre></td></tr></table></figure></p>
<p>5）函数参数的默认值<br><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">jQuery.ajax = function (url, &#123;</span><br><span class="line">  async = true,</span><br><span class="line">  beforeSend = function () &#123;&#125;,</span><br><span class="line">  cache = true,</span><br><span class="line">  // ... more config</span><br><span class="line">&#125;) &#123;</span><br><span class="line">  // ... do stuff</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>6）遍历Map结构<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>()</span><br><span class="line">    .set(<span class="string">'first'</span>, <span class="string">'hello'</span>)</span><br><span class="line">    .set(<span class="string">'second'</span>, <span class="string">'world'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> map) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(key + <span class="string">" is "</span> + value);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 获取键名</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [key] <span class="keyword">of</span> map) &#123; <span class="comment">// ...  &#125;</span></span><br><span class="line"><span class="comment">// 获取键值</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [,value] <span class="keyword">of</span> map) &#123; <span class="comment">// ...  &#125;</span></span><br></pre></td></tr></table></figure></p>
<p>7）输入模块的指定方法<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; SourceMapConsumer, SourceNode &#125; = <span class="built_in">require</span>(<span class="string">"source-map"</span>);</span><br></pre></td></tr></table></figure></p>
<h1 id="语句">语句</h1><p>ECMAScript 中的语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾，为了避免自动插入都好改变代码行为，最好加上分号。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> <span class="comment">//直接返回了</span></span><br><span class="line"> &#123;&#125;</span><br></pre></td></tr></table></figure></p>
<p>if, do-while,while,for,label,break,continue,switch和Java没有太大差别。</p>
<p>switch语句在比较值时使用的是全等操作符，因此不会发生类型转换（例如，字符串”10”不等于数值10）。</p>
<p>首先，可以在switch语句中使用任何数据类型（在很多其他语言中只能使用数值），无论是字符串，还是对象都没有问题。其次，每个case的值不一定是常量，可以是变量，甚至是表达式。</p>
<h2 id="for-in">for-in</h2><p>for-in 语句是一种精准的迭代语句,可以用来枚举对象的属性（包括原型链上的属性）。对于数组则是遍历下标</p>
<h2 id="with">with</h2><p>由于大量使用with语句会导致性能下降，同时也会给调试代码造成困难，因此在开发大型应用程序时，不建议使用with语句。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">with</span>(location)&#123;</span><br><span class="line">    <span class="keyword">var</span> qs = search.substring(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">var</span> hostName = hostname;</span><br><span class="line">    <span class="keyword">var</span> url = href;</span><br><span class="line">&#125;</span><br><span class="line"><span class="string">``</span><span class="string">`javascript</span><br><span class="line">使用with 语句关联了location 对象。这意味着在with 语句的代码块内部，每个变量首先被认为是一个局部变量，而如果在局部环境中找不到该变量的定义，就会查询location对象中是否有同名的属性。如果发现了同名属性，则以location对象属性的值作为变量的值。 严格模式下不允许使用with语句，否则将视为语法错误</span><br><span class="line"></span><br><span class="line">## for-of</span><br><span class="line">实现了Iterable接口的对象都可以用于for-of循环。for-of循环可以使用的范围包括数组、Set和Map结构及其entries,values,keys方法返回的对象、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、Generator函数返回的对象，以及字符串。</span><br><span class="line"></span><br><span class="line">并不是所有类似数组的对象都具有iterator接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。</span><br><span class="line">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="keyword">let</span> arrayLike = &#123; length: <span class="number">2</span>, <span class="number">0</span>: <span class="string">'a'</span>, <span class="number">1</span>: <span class="string">'b'</span> &#125;;</span><br><span class="line"><span class="built_in">Array</span>.from(arrayLike);</span><br></pre></td></tr></table></figure></p>
<p>通过for-of遍历对象，一种解决方法是，使用<code>Object.keys</code>方法将对象的键名生成一个数组，然后遍历这个数组。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">of</span> <span class="built_in">Object</span>.keys(someObject)) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(key + <span class="string">": "</span> + someObject[key]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>另一个方法是使用Generator函数将对象重新包装一下。</p>
<h1 id="函数">函数</h1><p>ECMAScript中最有意思的可能是函数了，函数实际上是对象。每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。<strong>由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定</strong>。</p>
<p>创建一个函数，在创建Funciton类型实例的同时还会创建一个原型对象，函数变量的prototype属性指向该原型对象。</p>
<h2 id="函数声明和表达式">函数声明和表达式</h2><p>函数通常是使用函数声明语法定义的。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span> (<span class="params">num1, num2</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>下面是使用函数表达式定义函数的方式，和上面效果是一样的。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> sum = <span class="function"><span class="keyword">function</span>(<span class="params">num1, num2</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>需要注意的下面这样声明函数，add只能在函数内部使用。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> sum = <span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">num1, num2</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num1 + num2;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>最后一种定义函数的方式是使用Function构造函数。Function构造函数可以接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则枚举出了新函数的参数。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> sum = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">"num1"</span>, <span class="string">"num2"</span>, <span class="string">"return num1 + num2"</span>); <span class="comment">// 不推荐，因为这种语法会导致解析两次代码(第一次是解析常规 ECMAScript 代码,第二次是解析传入构造函数中的字符串)</span></span><br></pre></td></tr></table></figure></p>
<p>在函数名后加圆括号就是调用函数，不加就只是一个函数指针。所以也可以像下面这样定义一个函数就直接调用。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure></p>
<p>匿名函数被认为是表达式；因此为了可调用性，它们首先会被执行。</p>
<p>有一些其他的调用函数表达式的方法，比如下面的两种方式语法不同，但是效果一模一样。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 另外两种方式</span></span><br><span class="line">+<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;();</span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;());</span><br></pre></td></tr></table></figure>
<p>这种立即执行的匿名函数可以用来解决只有一个全局作用域导致的常见错误是命名冲突。</p>
<h2 id="没有重载">没有重载</h2><p>将函数名想象为指针，也有助于理解为什么 ECMAScript中没有函数重载的概念。在创建第二个同名函数时,实际上覆盖了引用第一个函数的函数名变量。</p>
<h2 id="作为值的函数">作为值的函数</h2><p>因为 ECMAScript中的函数名本身就是变量，所以函数也可以作为值来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回</p>
<h2 id="arguments">arguments</h2><p>函数内部的arguments是一个类数组对象，包含着传入函数中的所有参数。虽然 arguments 的主要用途是保存函数参数，但是arguments存储的参数和形式参数存储的变量空间是独立的。arguments 对象为其内部属性以及函数形式参数创建 getter 和 setter 方法。因此，改变形参的值会影响到 arguments 对象的值，反之亦然。严格模式下不允许创建这些getter和setter，所以两者值互不影响。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">num1, num2</span>) </span>&#123;</span><br><span class="line"><span class="pi">    'use strict'</span>;</span><br><span class="line">    num1 = <span class="number">11</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">0</span>]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="this">this</h2><p>函数内部的另一个特殊对象是 this ,其行为与 Java 中的 this 大致类似。this引用的是执行函数的环境对象（当在网页的全局作用域中调用函数时，this对象引用的就是window）。</p>
<p>全局范围内使用this，它指向全局对象<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span> <span class="comment">//浏览器里就是window</span></span><br><span class="line">foo() <span class="comment">//这种函数调用中的this也是全局对象，如果在严格模式下将是undefined</span></span><br><span class="line">test.foo(); <span class="comment">//this指向test对象</span></span><br><span class="line"><span class="keyword">new</span> foo();  <span class="comment">//this指向新创建的对象</span></span><br></pre></td></tr></table></figure></p>
<p>还可以显示设置this<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, b, c</span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bar = &#123;&#125;;</span><br><span class="line"><span class="comment">//在foo 函数内 this 被设置成了 bar。</span></span><br><span class="line">foo.apply(bar, [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]); <span class="comment">// 数组将会被扩展，如下所示</span></span><br><span class="line">foo.call(bar, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// 传递到foo的参数是：a = 1, b = 2, c = 3</span></span><br></pre></td></tr></table></figure></p>
<p>常见误解<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Foo.method = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123; <span class="comment">//this将是全局对象，严格模式是undefined&#125;</span></span><br><span class="line">    test();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>很容易认为test方法中的this是Foo，但是并不是，这里test符合的是函数调用的情况，this将是全局对象，严格模式是undefined</p>
<p>为什么内部函数（test）没有取得其包含作用域(或外部作用域)的 this 对象呢? 每个函数在被调用时都会自动取得两个特殊变量: this 和 arguments 。内部函数在搜索这两个变量时,只会搜索到其活动对象（当前函数test的作用域）为止,因此永远不可能直接访问外部函数中的这两个变量。不过,可以把外部作用域中的 this 对象保存在一个闭包能够访问到的变量里。像下面这样使用。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Foo.method = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="keyword">this</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123; <span class="comment">//that&#125;</span></span><br><span class="line">    test();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>另一个例子，test 就像一个普通的函数被调用；因此，函数内的 this 将不再被指向到 someObject 对象。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> test = someObject.methodTest;</span><br><span class="line">test();</span><br></pre></td></tr></table></figure></p>
<p>虽然 this 的晚绑定特性似乎并不友好，但这确实是基于原型继承赖以生存的土壤。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Foo.prototype.method = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Bar</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Bar.prototype = Foo.prototype;</span><br><span class="line"><span class="keyword">new</span> Bar().method();</span><br></pre></td></tr></table></figure>
<p>当 method 被调用时，this 将会指向 Bar 的实例对象。</p>
<h2 id="返回值">返回值</h2><p>没有return，或者return不带任何返回值，都会返回undefined值。</p>
<h2 id="默认参数">默认参数</h2><p>ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。</p>
<p>定义了默认值的参数，必须是函数的尾部参数，其后不能再有其他无默认值的参数。</p>
<p>甚至还可以设置双重默认值。<br><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function fetch(url, &#123; method = 'GET' &#125; = &#123;&#125;)&#123;</span><br><span class="line">  console.log(method);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>上面代码中，调用函数fetch时，如果不含第二个参数，则默认值为一个空对象；如果包含第二个参数，则它的method属性默认值为GET。</p>
<p>如果传入undefined，将触发该参数等于默认值，null则没有这个效果。</p>
<p>注意，参数默认值所处的作用域，不是全局作用域，而是函数作用域。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">x, y = x</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(y);</span><br><span class="line">&#125;</span><br><span class="line">foo(<span class="number">2</span>) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure></p>
<h2 id="rest参数">rest参数</h2><p>rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。</p>
<p>函数的length属性，不包括rest参数。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">a, ...b</span>) </span>&#123;&#125;).length  <span class="comment">// 1</span></span><br></pre></td></tr></table></figure></p>
<h2 id="扩展运算符">扩展运算符</h2><p>将一个数组（只要实现了Iterable接口的对象即可）转为用逗号分隔的参数序列，该运算符主要用于函数调用<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.max(...[<span class="number">14</span>, <span class="number">3</span>, <span class="number">77</span>])</span><br></pre></td></tr></table></figure></p>
<h2 id="箭头函数">箭头函数</h2><p>ES6允许使用“箭头”（=&gt;）定义函数（和Java8中lambda表达式有点类似）<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 基本用法</span></span><br><span class="line">(param1, param2, paramN) =&gt; &#123; statements &#125;</span><br><span class="line">(param1, param2, paramN) =&gt; expression <span class="comment">// equivalent to:  =&gt; &#123; return expression; &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果只有一个参数可以省略圆括号</span></span><br><span class="line">singleParam =&gt; &#123; statements &#125;</span><br><span class="line">singleParam =&gt; expression</span><br><span class="line"></span><br><span class="line"><span class="comment">//如果没有参数，则需要一个圆括号</span></span><br><span class="line">() =&gt; &#123; statements &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//如果返回一个对象，必须在对象外面加上括号。</span></span><br><span class="line">params =&gt; (&#123;foo: bar&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 支持Rest参数</span></span><br><span class="line">(param1, param2, ...rest) =&gt; &#123; statements &#125;</span><br><span class="line"><span class="comment">// 支持变量解构</span></span><br><span class="line">(&#123;param1, param2&#125;) =&gt; &#123; statements &#125;</span><br></pre></td></tr></table></figure></p>
<p>箭头函数的一个用处是简化回调函数。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 正常函数写法</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].map(<span class="function"><span class="keyword">function</span> (<span class="params">x</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> x * x;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 箭头函数写法</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].map(x =&gt; x * x);</span><br></pre></td></tr></table></figure></p>
<p>箭头函数有几个使用注意点。</p>
<ul>
<li>函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。</li>
<li>不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。</li>
<li>不可以使用arguments对象，该对象在函数体内不存在。</li>
<li>不可以使用yield命令，因此箭头函数不能用作Generator函数。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  length: <span class="number">1</span>,</span><br><span class="line">  doSomeThing()&#123;</span><br><span class="line">    <span class="built_in">console</span>.log([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].map(x =&gt; x*<span class="keyword">this</span>.length));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.doSomeThing();<span class="comment">//[1,2,3]</span></span><br></pre></td></tr></table></figure>
<p>如果不是使用箭头函数，得到结果是不一样的，如下例，下面this就是window<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  length:<span class="number">1</span>,</span><br><span class="line">  doSomeThing()&#123;</span><br><span class="line">    <span class="built_in">console</span>.log([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].map(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.length * x;</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.doSomeThing();<span class="comment">//[0,0,0]</span></span><br></pre></td></tr></table></figure></p>
<p>箭头函数还有可以嵌套</p>
<h2 id="Generator_函数">Generator 函数</h2><p>Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。</p>
<p>Generator函数是一个普通函数，但是有几个特征。一是，function命令与函数名之间有一个星号；二是，可以像调用普通函数一样调用Generator函数，但是返回的结果并不是函数返回值，而是一个实现了Iterable和Iterator接口的对象（该对象的Symbol.iterator方法返回其自身）；三是，函数体内部使用yield语句，每调用Generator函数返回值的next方法，就会到达下一个yield语句，同时将yield语句后面的表达式求值后作为返回结果的value属性（yield语句在英语里的意思就是“产出”）；四是，函数体内也可以有<code>yield*</code>，其后面须是一个Iterable对象；五是，Generator函数返回值的next方法可以有参数，参数将作为函数体内上一个yield语句的值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">gen</span>(<span class="params">tree</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> x = <span class="keyword">yield</span> <span class="number">123</span>+<span class="number">234</span>;</span><br><span class="line">  <span class="keyword">yield</span> x;</span><br><span class="line">  <span class="keyword">return</span> <span class="number">123</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> it = gen();</span><br><span class="line">it[<span class="built_in">Symbol</span>.iterator]() === it <span class="comment">// true</span></span><br><span class="line">it.next();</span><br><span class="line">it.next(<span class="string">'a'</span>);</span><br><span class="line">it.next();</span><br></pre></td></tr></table></figure>
<p>一个稍复杂的例子，取出嵌套数组的所有成员<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 下面是二叉树的构造函数，三个参数分别是左树、当前节点和右树</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Tree</span>(<span class="params">left, label, right</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.left = left;</span><br><span class="line">  <span class="keyword">this</span>.label = label;</span><br><span class="line">  <span class="keyword">this</span>.right = right;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 下面是中序（inorder）遍历函数。</span></span><br><span class="line"><span class="comment">// 函数体内采用递归算法，所以左树和右树要用yield*遍历</span></span><br><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">inorder</span>(<span class="params">t</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (t) &#123;</span><br><span class="line">    <span class="keyword">yield</span>* inorder(t.left);</span><br><span class="line">    <span class="keyword">yield</span> t.label;</span><br><span class="line">    <span class="keyword">yield</span>* inorder(t.right);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 下面生成二叉树</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">make</span>(<span class="params">array</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 判断是否为叶节点</span></span><br><span class="line">  <span class="keyword">if</span> (array.length == <span class="number">1</span>) <span class="keyword">return</span> <span class="keyword">new</span> Tree(<span class="literal">null</span>, array[<span class="number">0</span>], <span class="literal">null</span>);</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> Tree(make(array[<span class="number">0</span>]), array[<span class="number">1</span>], make(array[<span class="number">2</span>]));</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> tree = make([[[<span class="string">'a'</span>], <span class="string">'b'</span>, [<span class="string">'c'</span>]], <span class="string">'d'</span>, [[<span class="string">'e'</span>], <span class="string">'f'</span>, [<span class="string">'g'</span>]]]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 遍历二叉树</span></span><br><span class="line"><span class="keyword">var</span> result = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> node <span class="keyword">of</span> inorder(tree)) &#123;</span><br><span class="line">  result.push(node);</span><br><span class="line">&#125;</span><br><span class="line">result <span class="comment">// ['a', 'b', 'c', 'd', 'e', 'f', 'g']</span></span><br></pre></td></tr></table></figure></p>
<p>Generator函数还有一个特点，它可以在函数体外通过返回的Iterator对象的throw方法抛出错误，然后在函数体内捕获。</p>
<p>一个对象的属性可以是Generator函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123; * gen()&#123;&#125; &#125;;</span><br><span class="line"><span class="keyword">var</span> obj = &#123; gen: <span class="function"><span class="keyword">function</span>* (<span class="params"></span>)</span>&#123;&#125; &#125;;</span><br></pre></td></tr></table></figure></p>
<h2 id="尾调用优化">尾调用优化</h2><p>尾调用（Tail Call）是函数式编程的一个重要概念，就是指某个函数的最后一步是调用另一个函数。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> g(x);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//上面是尾调用，下面三种情况都不是尾调用</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> y = g(x);</span><br><span class="line">  <span class="keyword">return</span> y;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> g(x) + <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">  g(x);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>最后一种情况等同于下面的代码。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">  g(x);</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">undefined</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>尾调用不一定出现在函数尾部，只要是最后一步操作即可。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>) </span>&#123;<span class="comment">//函数m和n都属于尾调用</span></span><br><span class="line">  <span class="keyword">if</span> (x &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> m(x)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> n(x);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。</p>
<p>尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。</p>
<p>“尾调用优化”（Tail call optimization），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。</p>
<p>注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addOne</span>(<span class="params">a</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> one = <span class="number">1</span>;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">inner</span>(<span class="params">b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> b + one;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> inner(a);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>上面的函数不会进行尾调用优化，因为内层函数inner用到了，外层函数addOne的内部变量one。</p>
<p>尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。</p>
<h2 id="作用域">作用域</h2><p>标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后回溯，直至找到标识符为止（如果找不到标识符，通常会导致错误发生）。</p>
<p>执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。 全局执行环境是最外围的一个执行环境。根据 ECMAScript实现所在的宿主环境不同，表示执行环境的对象也不一样。在Web浏览器中，全局执行环境被认为是 window 对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出——例如关闭网页或浏览器——时才会被销毁）。 每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。ECMAScript 程序中的执行流正是由这个方便的机制控制着。 当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（activation object）作为变量对象。活动对象在最开始时只包含一个变量，即arguments对象（这个对象在全局环境中是不存在的）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。</p>
<p>内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。这些环境之间的联系是线性、有次序的。每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">compare</span>(<span class="params">value1, value2</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (value1 &lt; value2)&#123;</span><br><span class="line">        <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (value1 &gt; value2)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> result = compare(<span class="number">5</span>, <span class="number">10</span>);</span><br></pre></td></tr></table></figure></p>
<p>当调用 compare() 时,会创建一个包含 arguments 、 value1 和 value2 的活动对象。全局执行环境的变量对象(包含 result和 compare )在 compare() 执行环境的作用域链中则处于第二位。</p>
<figure class="highlight gherkin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">+----------------------+</span><br><span class="line">|<span class="string">     compare          </span>|</span><br><span class="line">|<span class="string">  execution context   </span>|<span class="string">&lt;-------------------------------------------------+</span><br><span class="line">+----------------------+    +------------+      +----------------------+  </span>|</span><br><span class="line">|<span class="string">(scope chain) </span>|<span class="string">      -</span>|<span class="string">---&gt;</span>|<span class="string">scope chain </span>|<span class="string">  +--&gt;</span>|<span class="string">global variable object</span>|<span class="string">  </span>|</span><br><span class="line">+----------------------+    +------------+  |<span class="string">   +----------------------+  </span>|</span><br><span class="line">                            |<span class="string">1     </span>|<span class="string">    -</span>|<span class="string">--+   </span>|<span class="string">   compare </span>|<span class="string">         -</span>|<span class="string">--+</span><br><span class="line">                            +------------+      +----------------------+</span><br><span class="line">                            </span>|<span class="string">0     </span>|<span class="string">    -</span>|<span class="string">--+   </span>|<span class="string">   result  </span>|<span class="string"> undefined</span>|</span><br><span class="line">                            +------------+  |<span class="string">   +----------------------+</span><br><span class="line">                                            </span>|</span><br><span class="line">                                            |<span class="string">   +----------------------+</span><br><span class="line">                                            +--&gt;</span>|<span class="string">    compare()         </span>|</span><br><span class="line">                                                |<span class="string">  activation object   </span>|</span><br><span class="line">                                                +----------------------+</span><br><span class="line">                                                |<span class="string"> arguments </span>|<span class="string">  [5,10]  </span>|</span><br><span class="line">                                                +----------------------+</span><br><span class="line">                                                |<span class="string">   value1  </span>|<span class="string">  5       </span>|</span><br><span class="line">                                                +----------------------+</span><br><span class="line">                                                |<span class="string">   value2  </span>|<span class="string">  10      </span>|</span><br><span class="line">                                                +----------------------+</span><br></pre></td></tr></table></figure>
<p>每个执行环境都有一个表示变量的对象——变量对象。全局环境的变量对象始终存在,而像compare() 函数这样的局部环境的变量对象,则只在函数执行的过程中存在。在创建 compare() 函数时,会创建一个预先包含全局变量对象的作用域链,这个作用域链被保存在内部的 [[Scope]] 属性中。当调用 compare() 函数时,会为函数创建一个执行环境,然后通过复制函数的 [[Scope]] 属性中的对象构建起执行环境的作用域链。此后,又有一个活动对象(在此作为变量对象使用)被创建并被推入执行环境作用域链的前端。对于这个例子中 compare() 函数的执行环境而言,其作用域链中包含两个变量对象:本地活动对象和全局变量对象。显然,作用域链本质上是一个指向变量对象的指针列表,它只引用但不实际包含变量对象。</p>
<p>无论什么时候在函数中访问一个变量时,就会从作用域链中搜索具有相应名字的变量。一般来讲,当函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域(全局执行环境的变量对象)。但是,下面要讲的闭包的情况又有所不同。</p>
<h2 id="闭包">闭包</h2><p>闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> name;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> f = fn(<span class="string">"Howie"</span>);</span><br><span class="line">f();</span><br><span class="line">f = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure></p>
<p>即使这个内部函数被返回了,而且是在其他地方被调用了,但它仍然可以访问外部函数的变量 name。之所以还能够访问这个变量,是因为内部函数的作用域链中包含fn() 的作用域。</p>
<p>前面讲的有关如何创建作用域链以及作用域链有什么作用的细节,对彻底理解闭包至关重要。当某个函数被调用时,会创建一个执行环境(execution context)及相应的作用域链。然后,使用 arguments 和其他命名参数的值来初始化函数的活动对象(activation object)。但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象处于第三位,……直至作为作用域链终点的全局执行环境。</p>
<p>fn(“Howie”) 返回后其活动对象并没有被销毁，因为匿名函数（即被返回的f函数）的作用域链中有对其的引用。通过将 f设置为等于 null解除该函数的引用,就等于通知垃圾回收例程将其清除。随着匿名函数的作用域链被销毁,其他作用域(除了全局作用域)也都可以安全地销毁了。</p>
<p>过度使用闭包可能会导致内存占用过多，只在绝对必要时使用闭包。</p>
<p>作用域链的这种配置机制引出了一个值得注意的副作用,即闭包只能取得包含函数中任何变量的最后一个值。别忘了闭包所保存的是整个变量对象,而不是某个特殊的变量。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createFunctions</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; <span class="number">10</span>; i++)&#123;</span><br><span class="line">        result[i] = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span> i;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>数组中每个函数都只会返回10，而不是0到9。i在createFunctions()的活动变量中，而每个匿名函数的作用域链第二个位置就是createFunctions()的活动变量，当createFunctions()返回后，i的值为10，此时每个函数都引用着保存变量 i 的同一个变量对象,所以在每个函数内部 i 的值都是 10。通过创建另一个匿名函数强制让闭包的行为符合预期</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createFunctions</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; <span class="number">10</span>; i++)&#123;</span><br><span class="line">        result[i] = <span class="function"><span class="keyword">function</span>(<span class="params">num</span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> num;</span><br><span class="line">            &#125;;</span><br><span class="line">        &#125;(i);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>ES6中我们还可以使用let关键字声明i，这样i仅在for循环中有效，可以得到同样预期的结果。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createFunctions</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i=<span class="number">0</span>; i &lt; <span class="number">10</span>; i++)&#123;</span><br><span class="line">        result[i] = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span> i;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h1 id="模块">模块</h1><p>ES6中模块功能由三个命令构成：export，import和module。export命令用于用户自定义模块，规定对外接口；import命令用于导入其他模块提供的功能，同时创造命名空间（namespace），防止函数名冲突；module用于整体输入其它模块的提供的功能。</p>
<p>类和模块的内部，默认就是严格模式，所以不需要使用<code>use strict</code>指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// profile.js</span></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">'Michael'</span>;</span><br><span class="line"><span class="keyword">var</span> year = <span class="number">1958</span>;</span><br><span class="line"><span class="keyword">export</span> &#123;name, year&#125;;</span><br><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;name <span class="keyword">as</span> nickName, year&#125; <span class="keyword">from</span> <span class="string">'profile'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(nickName);</span><br></pre></td></tr></table></figure>
<p>import花括号里面的变量名必须与导出的变量名相同，可以通过as起别名。下面是另一个示例<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> &#123; es6 <span class="keyword">as</span> <span class="keyword">default</span> &#125; from <span class="string">'./someModule'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 等同于</span></span><br><span class="line"><span class="keyword">import</span> &#123; es6 &#125; <span class="keyword">from</span> <span class="string">'./someModule'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> es6;</span><br></pre></td></tr></table></figure></p>
<p>如上，如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。最后再看一个示例<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// circle.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> pi = <span class="number">3.1415926</span>;</span><br><span class="line"><span class="comment">// circleplus.js</span></span><br><span class="line"><span class="keyword">export</span> * from <span class="string">'circle'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> e = <span class="number">2.71828182846</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.exp(x);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="built_in">module</span> math from <span class="string">"circleplus"</span>; <span class="comment">//整体导入相当于 import * as math from "circleplus";</span></span><br><span class="line"><span class="keyword">import</span> exp <span class="keyword">from</span> <span class="string">"circleplus"</span>; <span class="comment">//导入circleplus中导出的默认方法</span></span><br><span class="line"><span class="built_in">console</span>.log(exp(math.e));</span><br></pre></td></tr></table></figure></p>
<p><code>export default</code>命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此<code>export deault</code>命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能对应一个方法。</p>
<h1 id="错误处理">错误处理</h1><p>ECMA-262 定义了下列 7 种错误类型: Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError。可以通过继承这些类型自定义错误类型。</p>
<p>内置的Error对象具有两个标准属性name和message</p>
<ul>
<li><strong>name</strong>：错误名称</li>
<li><strong>message</strong>：错误提示信息</li>
<li><strong>stack</strong>：错误的堆栈（非标准属性，但是大多数平台支持）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'error'</span>);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'x='</span> + x);</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">  &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    x = <span class="number">2</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'x='</span> + x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码说明，即使有return语句在前，finally代码块依然会得到执行，且在其执行完毕后，并不影响return语句要返回的值。</p>
<p>必须要给 throw 操作符指定一个值,这个值是什么类型,没有要求。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">throw</span> <span class="number">12345</span>;</span><br><span class="line"><span class="keyword">throw</span> <span class="string">"Hello world!"</span>;</span><br><span class="line"><span class="keyword">throw</span> <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">throw</span> &#123; name: <span class="string">"JavaScript"</span>&#125;;</span><br></pre></td></tr></table></figure></p>
<p>任何没有通过 try-catch 处理的错误都会触发 window 对象的 error 事件。</p>
<h1 id="垃圾回收">垃圾回收</h1><p>JavaScript 中最常用的垃圾收集方式是标记清除（mark-and-sweep）。</p>
<p>另一种不太常见的垃圾收集策略叫做引用计数（reference counting）。IE中的COM对象的垃圾收集机制采用的就是引用计数策略，只要在IE中涉及COM对象，就会存在循环引用的问题</p>
<h1 id="面向对象编程">面向对象编程</h1><h2 id="对象">对象</h2><p>ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样（以及其他将要讨论的原因），我们可以把ECMAScript的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数</p>
<h3 id="属性类型">属性类型</h3><p>ECMAScript 中有两种属性:数据属性和访问器属性。</p>
<ol>
<li>数据属性<br> 数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。<ul>
<li>[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为true。</li>
<li>[[Enumerable]]：表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为true。</li>
<li>[[Writable]]：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为true。</li>
<li>[[Value]]：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为undefined。</li>
</ul>
</li>
<li>访问器属性<br> 访问器属性不包含数据值；它们包含一对儿getter和setter函数（不过，这两个函数都不是必需的）。在读取访问器属性时，会调用 getter函数，这个函数负责返回有效的值；在写入访问器属性时，会调用setter函数并传入新值，这个函数负责决定如何处理数据。访问器属性有如下4个特性。<ul>
<li>[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。对于直接在对象上定义的属性，这个特性的默认值为true。</li>
<li>[[Enumerable]]：表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，这个特性的默认值为true。</li>
<li>[[Get]]：在读取属性时调用的函数。默认值为undefined。</li>
<li>[[Set]]：在写入属性时调用的函数。默认值为undefined。</li>
</ul>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperties(book, &#123;</span><br><span class="line">  _year: &#123;</span><br><span class="line">    value: <span class="number">2004</span></span><br><span class="line">  &#125;,</span><br><span class="line">  edition: &#123;</span><br><span class="line">    value: <span class="number">1</span></span><br><span class="line">  &#125;,</span><br><span class="line">  year: &#123;</span><br><span class="line">    get: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>._year;</span><br><span class="line">    &#125;,</span><br><span class="line">    set: <span class="function"><span class="keyword">function</span>(<span class="params">newValue</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">if</span> (newValue &gt; <span class="number">2004</span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>._year = newValue;</span><br><span class="line">        <span class="keyword">this</span>.edition += newValue - <span class="number">2004</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>使用 ECMAScript 5的 Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象，如果是访问器属性，这个对象的属性有configurable、enumerable、get 和set；如果是数据属性，这个对象的属性有configurable、enumerable、writable和value</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> descriptor = <span class="built_in">Object</span>.getOwnPropertyDescriptor(book, <span class="string">"_year"</span>);</span><br><span class="line">alert(descriptor.value); <span class="comment">//2004</span></span><br></pre></td></tr></table></figure>
<h3 id="对象使用和属性">对象使用和属性</h3><p>一种方式是使用对象字面量表示法。属性名可以是字符串也可以是Symbol类型的数据（后者必须使用方括号包含）<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  name : <span class="string">'Howie'</span>,</span><br><span class="line">  age : <span class="number">26</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>另一种方法是通过构造函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = <span class="string">'Howie'</span>;</span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">26</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person();</span><br></pre></td></tr></table></figure></p>
<p>构造函数一般首字母大写，如果构造函数没有参数，使用new时后面的括号也可以省略。</p>
<p>ES6中可以简写<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> nickname = <span class="built_in">Symbol</span>.for(<span class="string">'nickname'</span>);</span><br><span class="line"><span class="keyword">var</span> type = <span class="string">'cat'</span>;</span><br><span class="line"><span class="keyword">var</span> animal = &#123; [nickname]:<span class="string">'mimi'</span>, type ,<span class="string">'come from'</span>:<span class="string">'shan xi'</span>&#125;</span><br></pre></td></tr></table></figure></p>
<p>访问属性<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">animal[nickname]</span><br><span class="line">animal.type</span><br><span class="line">animal[<span class="string">'type'</span>]</span><br><span class="line">animal[<span class="string">'come from'</span>]</span><br></pre></td></tr></table></figure></p>
<p>从上例可以看出属性名不是一个有效的变量名（比如属性名中包含空格，或者属性名是 JS 的关键词）</p>
<p>有很多变通方法可以让数字的字面值看起来像对象。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">2.</span>toString();<span class="comment">//出错</span></span><br><span class="line"><span class="number">2.</span>.toString(); <span class="comment">// 第二个点号可以正常解析</span></span><br><span class="line"><span class="number">2</span> .toString(); <span class="comment">// 注意点号前面的空格</span></span><br><span class="line">(<span class="number">2</span>).toString(); <span class="comment">// 2先被计算</span></span><br></pre></td></tr></table></figure></p>
<h3 id="原型">原型</h3><p>JavaScript中每个函数都是Function类型的实例，每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个函数的原型对象，而这个对象的用途是包含可以由特定类型的<strong>所有实例共享的属性和方法</strong>。如果按照字面意思来理解，那么 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。</p>
<p>默认情况下，每个原型对象都有一个constructor属性，这个属性指向 prototype 属性所在实例，也就是构造函数。创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性；至于其他方法，则都是从Object继承而来的。每个对象都有[[Prototype]]属性（内部属性），虽然在脚本中没有标准的方式访问[[Prototype]]，但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性<code>__proto__</code>，通过它可以访问[[Prototype]]；这个属性指向了构造函数的原型对象，JavaScript中通过递归原型链来查找对象属性，同一个构造函数创建的对象都可以访问到其原型中的属性constructor。除了通过instanceof外也可以通过person.constructor === Person来判断是否是Person类型，但是instanceof更加可靠，因为prototype对象完全可以被覆盖，其属性constructor也就不一定是Person了。</p>
<p>ECMAScript 5增加了一个新方法，叫 Object.getPrototypeOf()，在所有支持的实现中，这个方法返回[[Prototype]]的值。</p>
<p>每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。</p>
<p>虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。<code>person1.name = &quot;Greg&quot;;</code>将会覆盖原型中的name属性。</p>
<p>使用hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法（不要忘了它是从Object继承来的）只在给定属性存在于对象实例中时，才会返回true。</p>
<p>有两种方式使用in操作符：单独使用和在for-in循环中使用。在单独使用时，in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。<code>&quot;name&quot; in person</code>为true</p>
<p>在使用 for-in 循环时，返回的是所有能够通过对象访问的、可枚举的（enumerated）属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。屏蔽了原型中不可枚举属性（即将[[Enumerable]]标记为 false 的属性）的实例属性也会在 for-in 循环中返回，因为根据规定，所有开发人员定义的属性都是可枚举的——只有在IE8及更早版本中例外。</p>
<p>要取得对象上所有可枚举的实例属性，可以使用ECMAScript 5的Object.keys()方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> keys = <span class="built_in">Object</span>.keys(Person.prototype); <span class="comment">//["name","age","jbo","sayName"]</span></span><br><span class="line"><span class="keyword">var</span> keys = <span class="built_in">Object</span>.getOwnPropertyNames(Person.prototype); <span class="comment">//["constructor","name","age","jbo","sayName"]</span></span><br></pre></td></tr></table></figure>
<h3 id="创建对象">创建对象</h3><p>工厂模式、寄生构造函数模式、稳妥构造函数模式都是构造函数（工厂模式中就是普通函数）内部创建一个对象然后返回，通常返回的对象和构造函数没有什么联系。后两者使用new创建对象，工厂模式是直接函数调用。第三种没有公共属性，而且也不引用this的对象。</p>
<p>组合使用构造函数模式和原型模式结合了两者的优点，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。动态原型模式则在此基础上通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name, age, job</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.age = age;</span><br><span class="line">  <span class="keyword">this</span>.job = job;</span><br><span class="line">  <span class="comment">//方法</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="keyword">this</span>.sayName != <span class="string">"function"</span>)&#123;</span><br><span class="line">    Person.prototype.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      alert(<span class="keyword">this</span>.name);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>需要在每个实例共享的属性应该在原型上定义，如方法，如果在this对象上定义，那么每个实例的相同函数名的函数实例实际是不同的，这样就会浪费空间。</p>
<h3 id="class">class</h3><p>ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span></span>&#123;</span><br><span class="line">  constructor(name, age, job)&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">    <span class="keyword">this</span>.age = age;</span><br><span class="line">    <span class="keyword">this</span>.job = job;</span><br><span class="line">  &#125;</span><br><span class="line">  sayName()&#123;</span><br><span class="line">    alert(name);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> friend = <span class="keyword">new</span> Person(<span class="string">"Nicholas"</span>, <span class="number">29</span>, <span class="string">"Software Engineer"</span>);</span><br></pre></td></tr></table></figure>
<p>上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。</p>
<p>如果对比前面的组合使用构造函数模式和原型模式，可以发现前面的Person构造函数对应现在Person类的构造方法constructor，前面Person原型上定义的sayName方法现在是类的内部方法。</p>
<p>一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。</p>
<p>与函数一样，Class也可以使用表达式的形式定义。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MyClass = <span class="class"><span class="keyword">class</span> <span class="title">Me</span> </span>&#123;</span><br><span class="line">  getClassName() &#123;</span><br><span class="line">    <span class="keyword">return</span> Me.name;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>Me只能在类内部使用</p>
<p>Class不存在变量提升<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Foo(); <span class="comment">// ReferenceError</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;&#125;</span><br></pre></td></tr></table></figure></p>
<p>与ES5一样，在Class内部可以使用get和set关键字，定义访问器属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyClass</span> </span>&#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">  get prop() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'getter'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  set prop(value) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'setter: '</span>+value);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">inst.prop = <span class="number">123</span>;</span><br></pre></td></tr></table></figure>
<p>类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">  static classMethod() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'hello'</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Foo.classMethod() <span class="comment">// 'hello'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">new</span> Foo();</span><br><span class="line">foo.classMethod()</span><br><span class="line"><span class="comment">// TypeError: undefined is not a function</span></span><br><span class="line"><span class="string">``</span><span class="string">`javascript</span><br><span class="line">父类的静态方法，可以被子类继承。</span><br><span class="line"></span><br><span class="line">ES6为new命令引入了一个`</span><span class="keyword">new</span>.target<span class="string">`属性，（在构造函数中）返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的，`</span><span class="keyword">new</span>.target<span class="string">`会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。</span><br><span class="line"></span><br><span class="line">需要注意的是，子类继承父类时，`</span><span class="keyword">new</span>.target<span class="string">`会返回子类。</span><br><span class="line"></span><br><span class="line">利用这个特点，可以写出不能独立使用、必须继承后才能使用的类。</span><br><span class="line">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Shape</span> </span>&#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">new</span>.target === Shape) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'本类不能实例化'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="string">``</span><span class="string">`javascript</span><br><span class="line">### 共享变量</span><br><span class="line">在构造函数原型上定义的属性可以被所有实例共享。</span><br><span class="line"></span><br><span class="line">### 静态变量</span><br><span class="line">ES6加入了static关键字。</span><br><span class="line"></span><br><span class="line">构造函数原型链上定义的变量或属性只能通过构造函数访问，也可以当做是静态的。</span><br><span class="line"></span><br><span class="line">### 私有变量</span><br><span class="line">严格来讲,JavaScript 中没有私有成员的概念;所有对象属性都是公有的。不过,倒是有一个私有变量的概念。任何在函数中定义的变量,都可以认为是私有变量,因为不能在函数的外部访问这些变量。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。</span><br><span class="line"></span><br><span class="line">我们把有权访问私有变量和私有函数的公有方法称为特权方法(privileged method)。有两种在对象上创建特权方法的方式。第一种是在构造函数中定义特权方法</span><br><span class="line">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyObject</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//私有变量和私有函数</span></span><br><span class="line">    <span class="keyword">var</span> privateVariable = <span class="number">10</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">privateFunction</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//特权方法</span></span><br><span class="line">    <span class="keyword">this</span>.publicMethod = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">        privateVariable++;</span><br><span class="line">        <span class="keyword">return</span> privateFunction();</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="静态私有变量">静态私有变量</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//私有变量和私有函数</span></span><br><span class="line">    <span class="keyword">var</span> privateVariable = <span class="number">10</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">privateFunction</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//构造函数</span></span><br><span class="line">    MyObject = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">//公有/特权方法</span></span><br><span class="line">    MyObject.prototype.publicMethod = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        privateVariable++;</span><br><span class="line">        <span class="keyword">return</span> privateFunction();</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<p>注意,这个模式在定义构造函数时并没有使用函数声明,而是使用了函数表达式。函数声明只能创建局部函数,但那并不是我们想要的。出于同样的原因,我们也没有在声明 MyObject 时使用 var 关键字。但也要知道,在严格模式下给未经声明的变量赋值会导致错误。</p>
<h3 id="模块模式">模块模式</h3><p>模块模式通过为单例添加私有变量和特权方法能够使其得到增强<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> singleton = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//私有变量和私有函数</span></span><br><span class="line">    <span class="keyword">var</span> privateVariable = <span class="number">10</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">privateFunction</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//特权/公有方法和属性</span></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        publicProperty: <span class="literal">true</span>,</span><br><span class="line">        publicMethod : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            privateVariable++;</span><br><span class="line">            <span class="keyword">return</span> privateFunction();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;();</span><br></pre></td></tr></table></figure></p>
<h3 id="增强的模块模式">增强的模块模式</h3><p>有人进一步改进了模块模式,即在返回对象之前加入对其增强的代码。这种增强的模块模式适合那些单例必须是某种类型的实例,同时还必须添加某些属性和(或)方法对其加以增强的情况。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> singleton = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//私有变量和私有函数</span></span><br><span class="line">    <span class="keyword">var</span> privateVariable = <span class="number">10</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">privateFunction</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//创建对象</span></span><br><span class="line">    <span class="keyword">var</span> object = <span class="keyword">new</span> CustomType();</span><br><span class="line">    <span class="comment">//添加特权/公有属性和方法</span></span><br><span class="line">    object.publicProperty = <span class="literal">true</span>;</span><br><span class="line">    object.publicMethod = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        privateVariable++;</span><br><span class="line">        <span class="keyword">return</span> privateFunction();</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">//返回这个对象</span></span><br><span class="line">    <span class="keyword">return</span> object;</span><br><span class="line">&#125;();</span><br></pre></td></tr></table></figure></p>
<h2 id="继承">继承</h2><p>JavaScript 不包含传统的类继承模型，而是使用 prototype 原型模型。</p>
<h3 id="原型链">原型链</h3><p>其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。</p>
<p><img src="http://fh-1.qiniudn.com/jsobj.jpg" alt="JavaScript Object Layout" title="JavaScript Object Layout"></p>
<p>上面这张图将原型链关系描绘地非常清晰</p>
<h3 id="继承方法">继承方法</h3><p>组合继承(combination inheritance) ,有时候也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">SuperType</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.colors = [<span class="string">"red"</span>, <span class="string">"blue"</span>, <span class="string">"green"</span>];</span><br><span class="line">&#125;</span><br><span class="line">SuperType.prototype.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  alert(<span class="keyword">this</span>.name);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">SubType</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  <span class="comment">//继承属性</span></span><br><span class="line">  SuperType.call(<span class="keyword">this</span>, name); <span class="comment">//第二次调用 SuperType()</span></span><br><span class="line">  <span class="keyword">this</span>.age = age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//继承方法</span></span><br><span class="line">SubType.prototype = <span class="keyword">new</span> SuperType(); <span class="comment">///第一次调用 SuperType()</span></span><br><span class="line">SubType.prototype.constructor = SubType;</span><br><span class="line">SubType.prototype.sayAge = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  alert(<span class="keyword">this</span>.age);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> instance1 = <span class="keyword">new</span> SubType(<span class="string">"Nicholas"</span>, <span class="number">29</span>);</span><br><span class="line">instance1.colors.push(<span class="string">"black"</span>);</span><br><span class="line">alert(instance1.colors); <span class="comment">//"red,blue,green,black"</span></span><br><span class="line">instance1.sayName(); <span class="comment">//"Nicholas";</span></span><br><span class="line">instance1.sayAge(); <span class="comment">//29</span></span><br><span class="line"><span class="keyword">var</span> instance2 = <span class="keyword">new</span> SubType(<span class="string">"Greg"</span>, <span class="number">27</span>);</span><br><span class="line">alert(instance2.colors); <span class="comment">//"red,blue,green"</span></span><br><span class="line">instance2.sayName(); <span class="comment">//"Greg";</span></span><br><span class="line">instance2.sayAge(); <span class="comment">//27</span></span><br></pre></td></tr></table></figure></p>
<p>如果知识用原型链继承，那么像colors这样的引用类型会被子类的所有实例共享，一个实例更改colors，所有都会更改，这不是我们想要的，而结合借用构造函数的继承方法，在构造函数内调用父类的构造方法，通过使用 apply() 和 call() 方法也可以在(将来)新创建的对象上执行构造函数，则解决了所有子类实例共享colors的问题。</p>
<p>组合继承是 JavaScript 最常用的继承模式;不过,它也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。没错,子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性。</p>
<p>在第一次调用 SuperType 构造函数时, SubType.prototype 会得到两个属性: name 和 colors ;它们都是 SuperType 的实例属性,只不过现在位于 SubType 的原型中。当调用 SubType 构造函数时,又会调用一次 SuperType 构造函数,这一次又在新对象上创建了实例属性 name 和 colors 。</p>
<p>寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">object</span>(<span class="params">o</span>)</span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">  F.prototype = o;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inheritPrototype</span>(<span class="params">subType, superType</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> prototype = object(superType.prototype); <span class="comment">//创建对象</span></span><br><span class="line">  prototype.constructor = subType; <span class="comment">//增强对象</span></span><br><span class="line">  subType.prototype = prototype; <span class="comment">//指定对象</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在函数内部,第一步是创建超类型原型的一个副本。第二步是为创建的副本添加 constructor 属性,从而弥补因重写原型而失去的默认的 constructor 属性。最后一步,将新创建的对象(即副本)赋值给子类型的原型。</p>
<p>ECMAScript 5 新增 Object.create() 方法。这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,Object.create() 与 object() 方法的行为相同<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">SuperType</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = name;</span><br><span class="line">  <span class="keyword">this</span>.colors = [<span class="string">"red"</span>, <span class="string">"blue"</span>, <span class="string">"green"</span>];</span><br><span class="line">&#125;</span><br><span class="line">SuperType.prototype.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  alert(<span class="keyword">this</span>.name);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">SubType</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  SuperType.call(<span class="keyword">this</span>, name);</span><br><span class="line">  <span class="keyword">this</span>.age = age;</span><br><span class="line">&#125;</span><br><span class="line">inheritPrototype(SubType, SuperType);</span><br><span class="line">SubType.prototype.sayAge = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  alert(<span class="keyword">this</span>.age);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>YUI 的 YAHOO.lang.extend() 方法采用了寄生组合继承</p>
<h3 id="extends">extends</h3><p>Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SuperType</span></span>&#123;</span><br><span class="line">  constructor(name)&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">  &#125;</span><br><span class="line">  sayName()&#123;</span><br><span class="line">    alert(<span class="keyword">this</span>.name);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SubType</span> <span class="keyword">extends</span> <span class="title">SuperType</span></span>&#123;</span><br><span class="line">  constructor(name, age)&#123;</span><br><span class="line">    <span class="keyword">super</span>(name);</span><br><span class="line">    <span class="keyword">this</span>.age = age;</span><br><span class="line">  &#125;</span><br><span class="line">  sayAge()&#123;</span><br><span class="line">    alert(<span class="keyword">this</span>.age);</span><br><span class="line">    <span class="keyword">super</span>.sayName();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。</p>
<p>对比借用构造函数继承，实质是先创建子类的实例对象this，然后再将父类的属性添加到this上面（<code>Parent.apply(this)</code>）。ES6的继承机制则不同，实质是先创建父类的实例对象this（所以必须先调用super方法），然后再用子类的属性修改this。</p>
<p>如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。</p>
<p>另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。</p>
<p>大部分浏览器实现中，每一个对象都有<code>__proto__</code>属性，指向对应的构造函数的prototype属性。Class作为构造函数的语法糖，同时有prototype属性和<code>__proto__</code>属性，因此同时存在两条继承链。</p>
<ol>
<li>子类的<code>__proto__</code>属性，表示构造函数的继承，总是指向父类。</li>
<li>子类prototype属性的<code>__proto__</code>属性，表示方法的继承，总是指向父类的prototype属性。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">SubType.__proto__ === SuperType <span class="comment">// true</span></span><br><span class="line">SubType.prototype.__proto__ === SuperType.prototype <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>下面，讨论三种特殊情况。</p>
<p>第一种特殊情况，子类继承Object类。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> <span class="keyword">extends</span> <span class="title">Object</span> </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">A.__proto__ === <span class="built_in">Object</span> <span class="comment">// true</span></span><br><span class="line">A.prototype.__proto__ === <span class="built_in">Object</span>.prototype <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p>
<p>第二种特殊情况，不存在任何继承。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">A.__proto__ === <span class="built_in">Function</span>.prototype <span class="comment">// true</span></span><br><span class="line">A.prototype.__proto__ === <span class="built_in">Object</span>.prototype <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p>
<p>第三种特殊情况，子类继承null。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> <span class="keyword">extends</span> <span class="title">null</span> </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">A.__proto__ === <span class="built_in">Function</span>.prototype <span class="comment">// true</span></span><br><span class="line">A.prototype.__proto__ === <span class="literal">undefined</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p>
<p>Object.getPrototypeOf方法可以用来从子类上获取父类。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.getPrototypeOf(SubType) === SuperType <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>因此，可以使用这个方法判断，一个类是否继承了另一个类。</p>
<p>原生构造函数是指语言内置的构造函数，通常用来生成数据结构，比如<code>Array()</code>。以前，这些原生构造函数是无法继承的，即不能自己定义一个Array的子类。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyArray</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">Array</span>.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyArray.prototype = <span class="built_in">Object</span>.create(<span class="built_in">Array</span>.prototype, &#123;</span><br><span class="line">  constructor: &#123;</span><br><span class="line">    value: MyArray,</span><br><span class="line">    writable: <span class="literal">true</span>,</span><br><span class="line">    configurable: <span class="literal">true</span>,</span><br><span class="line">    enumerable: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>上面代码定义了一个继承Array的MyArray类。但是，这个类的行为与Array完全不一致。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> colors = <span class="keyword">new</span> MyArray();</span><br><span class="line">colors[<span class="number">0</span>] = <span class="string">"red"</span>;</span><br><span class="line">colors.length  <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line">colors.length = <span class="number">0</span>;</span><br><span class="line">colors[<span class="number">0</span>]  <span class="comment">// "red"</span></span><br></pre></td></tr></table></figure>
<p>之所以会发生这种情况，是因为原生构造函数无法外部获取，通过<code>Array.apply()</code>或者分配给原型对象都不行。ES5是先新建子类的实例对象this，再将父类的属性添加到子类上，由于父类的属性无法获取，导致无法继承原生的构造函数。</p>
<p>ES6允许继承原生构造函数定义子类，因为ES6是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。下面是一个继承Array的例子。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyArray</span> <span class="keyword">extends</span> <span class="title">Array</span> </span>&#123;</span><br><span class="line">  constructor(...args) &#123;</span><br><span class="line">    <span class="keyword">super</span>(...args);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> MyArray();</span><br><span class="line">arr[<span class="number">0</span>] = <span class="number">12</span>;</span><br><span class="line">arr.length <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line">arr.length = <span class="number">0</span>;</span><br><span class="line">arr[<span class="number">0</span>] <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>
<h1 id="原生类型">原生类型</h1><h2 id="Object">Object</h2><p>JavaScript语言的所有对象都是由Object衍生的对象；所有对象都继承了Object.prototype的方法和属性，尽管它们可能被覆盖。</p>
<p>构建方法的参数为空，null或undefined将返回一个空对象，参数为String，Number,Boolean类型相当于使用其对应包装类型创建对象。对于其它类型的对象会返回原对象。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Object.assign(target, …sources)</td>
<td>把任意多个的源对象所拥有的自身可枚举属性拷贝给目标对象，然后返回目标对象。</td>
</tr>
<tr>
<td>Object.create(proto, [ propertiesObject ])</td>
<td>创建具有指定原型并可选择包含指定属性的对象。</td>
</tr>
<tr>
<td>Object.defineProperties(obj, props)</td>
<td>将一个或多个属性添加到对象，和/或修改现有属性的特性，并返回该对象。</td>
</tr>
<tr>
<td>Object.defineProperty(obj, prop, descriptor)</td>
<td>将属性添加到对象，或修改现有属性的特性，并返回该对象。</td>
</tr>
<tr>
<td>Object.freeze(obj)</td>
<td>冻结对象是指那些不能添加新的属性，不能修改已有属性的值，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性的对象。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。</td>
</tr>
<tr>
<td>Object.getOwnPropertyDescriptor(obj, prop)</td>
<td>返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）</td>
</tr>
<tr>
<td>Object.getOwnPropertyNames(obj)</td>
<td>返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）组成的数组。</td>
</tr>
<tr>
<td>Object.getOwnPropertySymbols(obj)</td>
<td>返回一个数组，该数组包含了指定对象自身的（非继承的）所有 symbol 属性键。</td>
</tr>
<tr>
<td>Object.getPrototypeOf(object)</td>
<td>返回指定对象的原型（也就是该对象内部属性[[Prototype]]的值）。</td>
</tr>
<tr>
<td>Object.is(value1, value2)</td>
<td>返回一个值，该值指示两个值是否相同。它与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身</td>
</tr>
<tr>
<td>Object.isExtensible(obj)</td>
<td>返回指示是否可将新属性添加到对象的值。</td>
</tr>
<tr>
<td>Object.isFrozen(obj)</td>
<td>判断一个对象是否被冻结（frozen）</td>
</tr>
<tr>
<td>Object.isSealed(obj)</td>
<td>判断一个对象是否是密封的（sealed）</td>
</tr>
<tr>
<td>Object.keys(obj)</td>
<td>返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致（两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性）。</td>
</tr>
<tr>
<td>Object.preventExtensions(obj)</td>
<td>让一个对象变的不可扩展，也就是永远不能再添加新的属性</td>
</tr>
<tr>
<td>Object.seal(obj)</td>
<td>可以让一个对象密封，并返回被密封后的对象。密封对象是指那些不能添加新的属性，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性，但可能可以修改已有属性的值的对象。</td>
</tr>
<tr>
<td>Object.setPrototypeOf(object, prototype)</td>
<td>设置一个对象的原型(既对象的[[Prototype]]内部属性)。</td>
</tr>
</tbody>
</table>
<p>Object原型属性</p>
<ul>
<li>Object.prototype.constructor： 返回一个指向创建了该对象原型的函数引用</li>
<li>Object.prototype.<strong>proto</strong>：非标准，一个对象的<strong>proto</strong> 属性和自己的内部属性[[Prototype]]指向一个相同的值 (通常称这个值为原型),原型的值可以是一个对象值也可以是null(比如说Object.prototype.<strong>proto</strong>的值就是null)</li>
</ul>
<p>Object实例方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>obj.hasOwnProperty(prop)</td>
<td>用来判断某个对象是否含有指定的自身属性</td>
</tr>
<tr>
<td>prototype.isPrototypeOf(obj)</td>
<td>测试一个对象是否存在于另一个对象的原型链上</td>
</tr>
<tr>
<td>obj.propertyIsEnumerable(prop)</td>
<td>返回一个布尔值，表明指定的属性名是否是当前对象可枚举的自身属性</td>
</tr>
<tr>
<td>obj.toLocaleString();</td>
<td>返回一个该对象的字符串表示。该方法主要用于被本地化相关对象覆盖。</td>
</tr>
<tr>
<td>obj.toString()</td>
<td>返回一个代表该对象的字符串。</td>
</tr>
<tr>
<td>obj.valueOf()</td>
<td>返回一个对象的值，默认情况下返回对象本身。</td>
</tr>
</tbody>
</table>
<h2 id="Array">Array</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Array</span>(size);</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Array</span>(...items);</span><br></pre></td></tr></table></figure>
<p>如果只有一个参数并且是数值，那么这个参数将用于指定数组大小，否则创建包含这个参数的一个数组。</p>
<p>Array的函数</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array.from(arrayLike[, mapFn[, thisArg]])</td>
<td>将一个类数组对象或可迭代对象转换成真实的数组。</td>
</tr>
<tr>
<td>Array.isArray(value)</td>
<td>返回一个布尔值，该值指示对象是否为数组。</td>
</tr>
<tr>
<td>Array.of(…items)</td>
<td>将它的任意多个参数放在一个数组里并返回。</td>
</tr>
</tbody>
</table>
<p>Array 实例的属性</p>
<ul>
<li>length： 数组长度</li>
</ul>
<p>Array 实例的方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>concat(…arguments)</td>
<td>将传入的数组或非数组值与原数组合并,组成一个新的数组并返回.</td>
</tr>
<tr>
<td>copyWithin(target, start[, end])</td>
<td>复制数组从start位置到end位置的元素到target，end默认是数组长度</td>
</tr>
<tr>
<td>entries()</td>
<td>返回包含数组的键/值对的迭代器</td>
</tr>
<tr>
<td>every(callbackfn[, thisArg])</td>
<td>测试数组的所有元素是否都通过了指定函数的测试</td>
</tr>
<tr>
<td>fill(value[, start[, end]])</td>
<td>将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值 区间是[start,end)，start默认0，end默认数组长度</td>
</tr>
<tr>
<td>filter(callbackfn[, thisArg])</td>
<td>利用所有通过指定函数测试的元素创建一个新的数组，并返回</td>
</tr>
<tr>
<td>find(predicate[, thisArg])</td>
<td>返回数组中满足测试条件的一个元素，如果没有满足条件的元素，则返回undefined</td>
</tr>
<tr>
<td>findIndex(predicate[, thisArg])</td>
<td>用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1</td>
</tr>
<tr>
<td>forEach(callbackfn[, thisArg])</td>
<td>让数组的每一项都执行一次给定的函数</td>
</tr>
<tr>
<td>indexOf(searchElement[, fromIndex])</td>
<td>返回根据给定元素找到的第一个索引值，否则返回-1</td>
</tr>
<tr>
<td>keys()</td>
<td>返回包含数组的索引值的迭代器</td>
</tr>
<tr>
<td>lastIndexOf(searchElement[, fromIndex])</td>
<td>返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始</td>
</tr>
<tr>
<td>map(callbackfn[, thisArg])</td>
<td>返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组</td>
</tr>
<tr>
<td>pop()</td>
<td>从数组中移除最后一个元素并将该元素返回</td>
</tr>
<tr>
<td>push(…items)</td>
<td>添加一个或多个元素到数组的末尾，并返回数组新的长度（length 属性值）</td>
</tr>
<tr>
<td>reduce(callbackfn[, initialValue])</td>
<td>通过对数组中的所有元素（从左到右）调用定义的回调函数来累积单个结果。 回调函数的返回值是累积的结果，并且作为对回调函数的下一个调用中的参数提供</td>
</tr>
<tr>
<td>reduceRight(callbackfn[, initialValue])</td>
<td>通过对数组中的所有元素调用定义的回调函数来按降序顺序（从右到左）累积单个结果。 回调函数的返回值是累积的结果，并且作为对回调函数的下一个调用中的参数提供</td>
</tr>
<tr>
<td>reverse()</td>
<td>颠倒数组中元素的顺序</td>
</tr>
<tr>
<td>shift()</td>
<td>从数组中移除第一个元素并将返回该元素</td>
</tr>
<tr>
<td>slice(start, end)</td>
<td>把数组中一部分的浅复制（shallow copy）存入一个新的数组对象中，并返回这个新的数组</td>
</tr>
<tr>
<td>some(callbackfn[, thisArg])</td>
<td>测试数组中的某些元素是否通过了指定函数的测试</td>
</tr>
<tr>
<td>sort(comparefn)</td>
<td>对数组的元素做原地的排序，并返回这个数组。 sort 可能不是稳定的</td>
</tr>
<tr>
<td>splice(start, deleteCount, …items)</td>
<td>用新元素替换旧元素，以此修改数组的内容</td>
</tr>
<tr>
<td>toLocaleString([reserved1[, reserved2]])</td>
<td>返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开</td>
</tr>
<tr>
<td>toString()</td>
<td>返回一个字符串，表示指定的数组及其元素</td>
</tr>
<tr>
<td>unshift(…items)</td>
<td>在数组的开头添加一个或者多个元素，并返回数组新的 length 值</td>
</tr>
<tr>
<td>values()</td>
<td>返回一个新的包含数组中每个索引的取值的 Array Iterator （数组迭代）对象</td>
</tr>
<tr>
<td><a href="">@@iterator</a></td>
<td>返回迭代器</td>
</tr>
</tbody>
</table>
<h2 id="Date">Date</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Date</span>(dateVal)</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Date</span>(year, month, date[, hours[, minutes[, seconds[,ms]]]])</span><br></pre></td></tr></table></figure>
<p>Date 函数</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Date.now()</td>
<td>返回 1970 年 1 月 1日与当前日期和时间之间的毫秒数。</td>
</tr>
<tr>
<td>Date.parse(string)</td>
<td>分析一个包含日期的字符串，并返回该日期与 1970 年 1 月 1 日午夜之间相差的毫秒数。</td>
</tr>
<tr>
<td>Date.UTC(year, month, date[, hours[, minutes[, seconds[,ms]]]])</td>
<td>返回协调通用时间 (UTC)（或 GMT）1970 年 1 月 1 日午夜与所提供的日期之间相差的毫秒数。</td>
</tr>
</tbody>
</table>
<p>Date实例方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>getTime()</td>
<td>返回表示日期的毫秒数;与 valueOf() 方法返回的值相同</td>
</tr>
<tr>
<td>setTime(ms)</td>
<td>以毫秒数设置日期,会改变整个日期</td>
</tr>
<tr>
<td>getFullYear()</td>
<td>取得4位数的年份(如2007而非仅07)</td>
</tr>
<tr>
<td>getUTCFullYear()</td>
<td>返回UTC日期的4位数年份</td>
</tr>
<tr>
<td>setFullYear(year)</td>
<td>设置日期的年份。传入的年份值必须是4位数字(如2007而非仅07)</td>
</tr>
<tr>
<td>setUTCFullYear(year)</td>
<td>设置UTC日期的年份。传入的年份值必须是4位数字(如2007而非仅07)</td>
</tr>
<tr>
<td>getMonth()</td>
<td>返回日期中的月份,其中0表示一月,11表示十二月</td>
</tr>
<tr>
<td>getUTCMonth()</td>
<td>返回UTC日期中的月份,其中0表示一月,11表示十二月</td>
</tr>
<tr>
<td>setMonth(month)</td>
<td>设置日期的月份。传入的月份值必须大于0,超过11则增加年份</td>
</tr>
<tr>
<td>setUTCMonth(month)</td>
<td>设置UTC日期的月份。传入的月份值必须大于0,超过11则增加年份</td>
</tr>
<tr>
<td>getDate()</td>
<td>返回日期月份中的天数(1到31)</td>
</tr>
<tr>
<td>getUTCDate()</td>
<td>返回UTC日期月份中的天数(1到31)</td>
</tr>
<tr>
<td>setDate(date)</td>
<td>设置日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份</td>
</tr>
<tr>
<td>setUTCDate(date)</td>
<td>设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份</td>
</tr>
<tr>
<td>getDay()</td>
<td>返回日期中星期的星期几(其中0表示星期日,6表示星期六)</td>
</tr>
<tr>
<td>getUTCDay()</td>
<td>返回UTC日期中星期的星期几(其中0表示星期日,6表示星期六)</td>
</tr>
<tr>
<td>getHours()</td>
<td>返回日期中的小时数(0到23)</td>
</tr>
<tr>
<td>getUTCHours()</td>
<td>返回UTC日期中的小时数(0到23)</td>
</tr>
<tr>
<td>setHours(hours)</td>
<td>设置日期中的小时数。传入的值超过了23则增加月份中的天数</td>
</tr>
<tr>
<td>setUTCHours(hours)</td>
<td>设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数</td>
</tr>
<tr>
<td>getMinutes()</td>
<td>返回日期中的分钟数(0到59)</td>
</tr>
<tr>
<td>getUTCMinutes()</td>
<td>返回UTC日期中的分钟数(0到59)</td>
</tr>
<tr>
<td>setMinutes(minutes)</td>
<td>设置日期中的分钟数。传入的值超过59则增加小时数</td>
</tr>
<tr>
<td>setUTCMinutes(minutes)</td>
<td>设置UTC日期中的分钟数。传入的值超过59则增加小时数</td>
</tr>
<tr>
<td>getSeconds()</td>
<td>返回日期中的秒数(0到59)</td>
</tr>
<tr>
<td>getUTCSeconds()</td>
<td>返回UTC日期中的秒数(0到59)</td>
</tr>
<tr>
<td>setSeconds(seconds)</td>
<td>设置日期中的秒数。传入的值超过了59会增加分钟数</td>
</tr>
<tr>
<td>setUTCSeconds(seconds)</td>
<td>设置UTC日期中的秒数。传入的值超过了59会增加分钟数</td>
</tr>
<tr>
<td>getMilliseconds()</td>
<td>返回日期中的毫秒数</td>
</tr>
<tr>
<td>getUTCMilliseconds()</td>
<td>返回UTC日期中的毫秒数</td>
</tr>
<tr>
<td>setMilliseconds(ms)</td>
<td>设置日期中的毫秒数</td>
</tr>
<tr>
<td>setUTCMilliseconds(ms)</td>
<td>设置UTC日期中的毫秒数</td>
</tr>
<tr>
<td>getTimezoneOffset()</td>
<td>返回本地时间与UTC时间相差的分钟数。例如,美国东部标准时间返回300。在某地进入夏令时的情况下,这个值会有所变化</td>
</tr>
<tr>
<td>toDateString()</td>
<td>以特定于实现的格式显示星期几、月、日和年；</td>
</tr>
<tr>
<td>toTimeString()</td>
<td>以特定于实现的格式显示时、分、秒和时区；</td>
</tr>
<tr>
<td>toLocaleDateString()</td>
<td>以特定于地区的格式显示星期几、月、日和年；</td>
</tr>
<tr>
<td>toLocaleTimeString()</td>
<td>以特定于实现的格式显示时、分、秒；</td>
</tr>
<tr>
<td>toUTCString()</td>
<td>以特定于实现的格式完整的UTC日期。</td>
</tr>
<tr>
<td>toJSON()</td>
<td>调用 toJSON() 返回一个 JSON 格式字符串 (使用 toISOString) ，表示该日期对象的值。默认情况下，这个方法常用于 JSON 序列化时序列化日期对象</td>
</tr>
</tbody>
</table>
<h2 id="RegExp">RegExp</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">RegExp</span>(pattern[, flags])</span><br><span class="line">/pattern/[flags]</span><br></pre></td></tr></table></figure>
<p>使用构造函数，pattern可以是字符串，ES6中也可以是正则字面量，如果是正则字面量第二个参数会覆盖字面量中的标志。构造函数如果第一个是字符串需要注意所有元字符需要双重转义（<code>\\</code>字符串中就是<code>\\\\</code>）</p>
<p>模式中使用的所有元字符都必须转义。正则表达式中的元字符包括： <code>( [ { \ ^ $ | ) ? * + .]}</code></p>
<p>正则表达式的匹配模式支持下列 5 个标志，后两个是ES6新增。</p>
<ul>
<li>g :表示全局(global)模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;</li>
<li>i :表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;</li>
<li>m :表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。</li>
<li>u :表示“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符。也就是说，会正确处理四个字节的UTF-16编码。</li>
<li>y :表示“粘连”（sticky）模式。y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。如果同时使用g修饰符和y修饰符，则y修饰符覆盖g修饰符。</li>
</ul>
<p>RegExp的每个实例都具有下列属性，通过这些属性可以取得有关模式的各种信息。</p>
<ul>
<li>global：布尔值，表示是否设置了g标志。</li>
<li>ignoreCase：布尔值，表示是否设置了i标志。</li>
<li>lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从0算起。</li>
<li>multiline：布尔值，表示是否设置了m标志。</li>
<li>source：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回。<br>ES6新增属性</li>
<li>sticky:布尔值，表示是否设置了y标志。</li>
<li>flags: 字符串，表示正则表达式的标志</li>
</ul>
<p>RegExp的实例方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>exec(str)</td>
<td>为指定的一段字符串执行搜索匹配操作。它的返回值是一个数组或者 null。返回的数组虽然是Array 的实例，但包含两个额外的属性：index 和input。其中，index 表示匹配项在字符串中的位置，而 input 表示应用正则表达式的字符串。在数组中，第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串</td>
</tr>
<tr>
<td>test(str)</td>
<td>执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false</td>
</tr>
</tbody>
</table>
<p>RegExp实例继承的toLocaleString()和toString()方法都会返回正则表达式的字面量，与创建正则表达式的方式无关</p>
<p>正则表达式的valueOf()方法返回正则表达式本身。</p>
<p>RegExp 构造函数属性分别有一个长属性名和一个短属性名（Opera是例外，它不支持短属性名）。下表列出了RegExp构造函数的属性。</p>
<table>
<thead>
<tr>
<th>长属性名</th>
<th>短属性名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>input</td>
<td>$_</td>
<td>最近一次要匹配的字符串。Opera未实现此属性</td>
</tr>
<tr>
<td>lastMatch</td>
<td>$&amp;</td>
<td>最近一次的匹配项。Opera未实现此属性</td>
</tr>
<tr>
<td>lastParen</td>
<td>$+</td>
<td>最近一次匹配的捕获组。Opera未实现此属性</td>
</tr>
<tr>
<td>leftContext</td>
<td>$`</td>
<td>input字符串中lastMatch之前的文本</td>
</tr>
<tr>
<td>multiline</td>
<td>$*</td>
<td>布尔值,表示是否所有表达式都使用多行模式。IE和Opera未实现此属性</td>
</tr>
<tr>
<td>rightContext</td>
<td>$’</td>
<td>Input字符串中lastMatch之后的文本</td>
</tr>
</tbody>
</table>
<h2 id="Function">Function</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Function</span>(p1, p2, … , pn, body)</span><br></pre></td></tr></table></figure>
<p>JavaScript中所有函数都是Function类型的实例。</p>
<p>Function实例属性</p>
<ul>
<li>name： 函数名</li>
<li>length： 函数参数的个数</li>
<li>prototype： 函数原型</li>
</ul>
<p>Function实例方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>apply(thisArg, argArray)</td>
<td>指定 this 值和参数（参数以数组或类数组对象的形式存在）的情况下调用某个函数。 和call方法的区别是call方法接受的是一个参数列表</td>
</tr>
<tr>
<td>bind(thisArg, …args)</td>
<td>创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数</td>
</tr>
<tr>
<td>call(thisArg, …args)</td>
<td>在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">list</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> list1 = list(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// [1, 2, 3]</span></span><br></pre></td></tr></table></figure>
<h2 id="Boolean">Boolean</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Boolean</span>([value])</span><br></pre></td></tr></table></figure>
<p>基本类型与引用类型的布尔值还有两个区别。首先，typeof操作符对基本类型返回”boolean”，而对引用类型返回”object”。其次，由于Boolean对象是Boolean类型的实例，所以使用instanceof操作符测试Boolean对象会返回true，而测试基本类型的布尔值则返回false。</p>
<h2 id="Number-1">Number</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Number</span>([value])</span><br></pre></td></tr></table></figure>
<p>Number属性</p>
<ul>
<li>Number.MAX_VALUE 能表示的最大正数。最大的负数是 -MAX_VALUE。</li>
<li>Number.MIN_VALUE 能表示的最小正数 — 即，最接近 0 的正数 (实际上不会变成 0)。最小的负数是 -MIN_VALUE。</li>
<li>Number.MAX_SAFE_INTEGER 能表示的最大整数。(2^53−1).</li>
<li>Number.MIN_SAFE_INTEGER 能表示的最小整数。 (−(2^53−1))</li>
<li>Number.NaN 特殊的“非数字”值。</li>
<li>Number.NEGATIVE_INFINITY 特殊的负无穷大值，在溢出时返回。</li>
<li>Number.POSITIVE_INFINITY 特殊的正无穷大值，在溢出时返回。</li>
</ul>
<p>Number函数</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Number.isFinite(number)</td>
<td>返回一个布尔值，该值指示值是否为有限数。</td>
</tr>
<tr>
<td>Number.isInteger(number)</td>
<td>返回一个布尔值，该值指示值是否为整数。</td>
</tr>
<tr>
<td>Number.isNaN(number)</td>
<td>返回一个布尔值，该值指示某个值是否为保留值 NaN（非数字）。</td>
</tr>
<tr>
<td>Number.isSafeInteger(number)</td>
<td>返回一个布尔值，该值指示值是否可在 JavaScript 中安全表示。</td>
</tr>
<tr>
<td>Number.parseFloat(string)</td>
<td>解析一个字符串并返回一个浮点数</td>
</tr>
<tr>
<td>Number.parseInt(string, radix)</td>
<td>解析一个字符串并返回一个整数，第二参数指定进制</td>
</tr>
</tbody>
</table>
<p>Number实例方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>toExponential(fractionDigits)</td>
<td>返回一个字符串，其中包含一个以指数记数法表示的数字。</td>
</tr>
<tr>
<td>toFixed(fractionDigits)</td>
<td>返回一个字符串，它表示定点表示法中的一个数字。</td>
</tr>
<tr>
<td>toLocaleString([reserved1[, reserved2]])</td>
<td>返回基于当前区域设置转换为字符串的对象。</td>
</tr>
<tr>
<td>toPrecision(precision)</td>
<td>返回一个字符串，其中包含一个以指数或定点表示法表示且具有指定位数的数字。</td>
</tr>
<tr>
<td>toString(radix)</td>
<td>返回对象的字符串表示形式。可以指定进制</td>
</tr>
<tr>
<td>valueOf()</td>
<td>返回指定对象的基元值。</td>
</tr>
</tbody>
</table>
<h2 id="String">String</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">String</span>(value);</span><br></pre></td></tr></table></figure>
<p>ES6提供了对Unicode辅助平面码点的支持</p>
<p>String 函数</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>String.fromCharCode(…codeUnits)</td>
<td>根据指定的一或多个 Unicode 字符编码来返回一个字符串。</td>
</tr>
<tr>
<td>String.fromCodePoint(…codePoints)</td>
<td>可以识别码点大于0xFFFF（辅助平面）的字符，弥补了String.fromCharCode方法的不足</td>
</tr>
<tr>
<td>String.raw(template, …substitutions)</td>
<td>模板字符串的标签函数，它的作用类似于 Python 中的字符串前缀 r 和 C# 中的字符串前缀 @，是用来获取一个模板字符串的原始字面量值的</td>
</tr>
</tbody>
</table>
<p>String 实例的方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>charAt(pos)</td>
<td>返回指定索引处的字符。</td>
</tr>
<tr>
<td>charCodeAt(pos)</td>
<td>返回指定字符的 Unicode 编码。但是不支持辅助平面的码点</td>
</tr>
<tr>
<td>codePointAt(pos)</td>
<td>返回一个 Unicode UTF-16 字符的码点。辅助平面的码点</td>
</tr>
<tr>
<td>concat(…args)</td>
<td>返回由提供的两个字符串串联而成的字符串。</td>
</tr>
<tr>
<td>endsWith(searchString[,endPosition])</td>
<td>返回一个布尔值，该值指示字符串或子字符串是否以传入字符串结尾。</td>
</tr>
<tr>
<td>includes(searchString[, position])</td>
<td>返回一个布尔值，该值指示传入字符串是否包含在字符串对象中。</td>
</tr>
<tr>
<td>indexOf(searchString[, position])</td>
<td>返回字符串内第一次出现子字符串的字符位置。</td>
</tr>
<tr>
<td>lastIndexOf(searchString[, position])</td>
<td>返回字符串内子字符串的最后一个匹配项。</td>
</tr>
<tr>
<td>localeCompare(that[, reserved1[, reserved2]])</td>
<td>返回一个值，该值指示两个字符串在当前区域设置中是否相等。</td>
</tr>
<tr>
<td>match(regexp)</td>
<td>通过使用提供的正则表达式对象来搜索字符串并以数组形式返回结果。</td>
</tr>
<tr>
<td>normalize([form])</td>
<td>按照指定的一种 Unicode 正规形式将当前字符串正规化。四种 Unicode 正规形式 “NFC”, “NFD”, “NFKC”, 以及 “NFKD” 其中的一个, 默认值为 “NFC”</td>
</tr>
<tr>
<td>repeat(count)</td>
<td>返回一个新的字符串对象，它的值等于重复了指定次数的原始字符串。</td>
</tr>
<tr>
<td>replace(searchValue, replaceValue)</td>
<td>使用正则表达式替换字符串中的文本并返回结果。</td>
</tr>
<tr>
<td>search(regexp)</td>
<td>返回正则表达式搜索中第一个子字符串匹配项的位置。</td>
</tr>
<tr>
<td>slice(start, end)</td>
<td>返回字符串的片段。</td>
</tr>
<tr>
<td>split(separator, limit)</td>
<td>返回一个字符串拆分为若干子字符串时所产生的字符串数组。</td>
</tr>
<tr>
<td>startsWith(searchString[, position])</td>
<td>返回一个布尔值，该值指示字符串或子字符串是否以传入字符串开头。</td>
</tr>
<tr>
<td>substr(start, end)</td>
<td>返回一个从指定位置开始且具有指定长度的子字符串。</td>
</tr>
<tr>
<td>substring(start, end)</td>
<td>返回 String 对象中指定位置处的子字符串。</td>
</tr>
<tr>
<td>toLocaleLowerCase([reserved1[, reserved2]])</td>
<td>返回一个字符串，其中所有字母字符都转换为小写形式，并将考虑主机环境的当前区域设置。</td>
</tr>
<tr>
<td>toLocaleUpperCase([reserved1[, reserved2]])</td>
<td>返回一个字符串，其中所有字母字符都转换为大写形式，并将考虑主机环境的当前区域设置。</td>
</tr>
<tr>
<td>toLowerCase()</td>
<td>返回一个字符串，其中所有字母字符都转换为小写形式。</td>
</tr>
<tr>
<td>toString()</td>
<td>返回字符串。</td>
</tr>
<tr>
<td>toUpperCase()</td>
<td>返回一个字符串，其中所有字母字符都转换为大写形式。</td>
</tr>
<tr>
<td>trim()</td>
<td>返回已移除前导空格、尾随空格和行终止符的字符串。</td>
</tr>
<tr>
<td>valueOf()</td>
<td>返回字符串</td>
</tr>
<tr>
<td><a href="">@@iterator</a></td>
<td>返回迭代器</td>
</tr>
</tbody>
</table>
<p>ECMAScript还提供了三个基于子字符串创建新字符串的方法：slice()、substr()和substring()。这三个方法都会返回被操作字符串的一个子字符串，而且也都接受一或两个参数。第一个参数指定子字符串的开始位置，第二个参数（在指定的情况下）表示子字符串到哪里结束。具体来说，slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置。而 substr() 的第二个参数指定的则是返回的字符个数。如果没有给这些方法传递第二个参数，则将字符串的长度作为结束位置。与concat()方法一样，slice()、substr()和 substring()也不会修改字符串本身的值——它们只是返回一个基本类型的字符串值，对原始字符串没有任何影响。</p>
<p>在传递给这些方法的参数是负值的情况下，它们的行为就不尽相同了。其中，slice()方法会将传入的负值与字符串的长度相加，substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。最后，substring()方法会把所有负值参数都转换为0</p>
<h2 id="Global">Global</h2><p>Global对象可以说是ECMAScript中最特别的一个对象了，因为不管你从什么角度上看，这个对象都是不存在的。ECMAScript中的Global对象在某种意义上是作为一个终极的“兜底儿对象”来定义的。换句话说，不属于任何其他对象的属性和方法，最终都是它的属性和方法。事实上，没有全局变量或全局函数；所有在全局作用域中定义的属性和函数，都是Global对象的属性。诸如 isNaN() 、 isFinite() 、 parseInt() 以及 parseFloat() ,实际上全都是 Global 对象的方法。</p>
<ul>
<li><p>URI 编码方法<br>  对象的 encodeURI()和 encodeURIComponent()方法可以对 URI（Uniform Resource Identifiers，通用资源标识符）进行编码，以便发送给浏览器。有效的 URI 中不能包含某些字符，例如空格。而这两个URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。 其中，encodeURI()主要用于整个URI（例如，<code>http://www.wrox.com/illegal value.htm</code>），而 encodeURIComponent()主要用于对URI中的某一段（例如前面URI中的illegal value.htm）进行编码。它们的主要区别在于，encodeURI()不会对本身属于 URI 的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而encodeURIComponent()则会对它发现的任何非标准字符进行编码。</p>
<p>  一般来说，我们使用 encodeURIComponent()方法的时候要比使用encodeURI()更多，因为在实践中更常见的是对查询字符串参数而不是对基础 URI进行编码。</p>
<p>  与 encodeURI()和 encodeURIComponent()方法对应的两个方法分别是 decodeURI()和decodeURIComponent()</p>
</li>
<li><p>eval()方法<br>  eval()方法就像是一个完整的ECMAScript解析器，它只接受一个参数，即要执行的ECMAScript（或JavaScript）字符串。看例子： eval(“alert(‘hi’)”); 这行代码的作用等价于代码： alert(“hi”);</p>
<p>  当解析器发现代码中调用eval()方法时，它会将传入的参数当作实际的ECMAScript语句来解析，然后把执行结果插入到原位置。通过 eval() 执行的代码可以引用在包<br>含环境中定义的变量 <code>var msg = &quot;hello world&quot;; eval(&quot;alert(msg)&quot;);</code></p>
<p>  在eval()中创建的任何变量或函数都不会被提升，因为在解析代码的时候，它们被包含在一个字符串中；它们只在eval()执行的时候创建。 严格模式下，在外部访问不到eval()中创建的任何变量或函数，在严格模式下,为 eval 赋值也会导致错误</p>
</li>
<li><p>Global 对象的属性<br>  特殊的值undefined、NaN以及Infinity都是Global对象的属性。此外，所有原生引用类型的构造函数，像Object和Function，也都是Global对象的属性。下表列出了Global对象的所有属性。</p>
</li>
</ul>
<p>isFinite(number)，isNaN(number)，parseFloat(string)，parseInt(string , radix)这几个函数功能和Number的类似</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>undefined</td>
<td>特殊值 undefined</td>
</tr>
<tr>
<td>NaN</td>
<td>特殊值 NaN</td>
</tr>
<tr>
<td>Infinity</td>
<td>特殊值 Infinity</td>
</tr>
<tr>
<td>Date</td>
<td>构造函数 Date</td>
</tr>
<tr>
<td>RegExp</td>
<td>构造函数 RegExp</td>
</tr>
<tr>
<td>Error</td>
<td>构造函数 Error</td>
</tr>
<tr>
<td>Object</td>
<td>构造函数 Object</td>
</tr>
<tr>
<td>Array</td>
<td>构造函数 Array</td>
</tr>
<tr>
<td>Function</td>
<td>构造函数 Function</td>
</tr>
<tr>
<td>Boolean</td>
<td>构造函数 Boolean</td>
</tr>
<tr>
<td>String</td>
<td>构造函数 String</td>
</tr>
<tr>
<td>Number</td>
<td>构造函数 Number</td>
</tr>
<tr>
<td>EvalError</td>
<td>构造函数 EvalError</td>
</tr>
<tr>
<td>RangeError</td>
<td>构造函数 RangeError</td>
</tr>
<tr>
<td>ReferenceError</td>
<td>构造函数 ReferenceError</td>
</tr>
<tr>
<td>SyntaxError</td>
<td>构造函数 SyntaxError</td>
</tr>
<tr>
<td>TypeError</td>
<td>构造函数 TypeError</td>
</tr>
<tr>
<td>URIError</td>
<td>构造函数 URIError</td>
</tr>
</tbody>
</table>
<p>ECMAScript 5明确禁止给undefined、NaN和Infinity赋值，这样做即使在非严格模式下也会导致错误。</p>
<h2 id="Math">Math</h2><ul>
<li>Math 对象的属性</li>
</ul>
<table>
<thead>
<tr>
<th>属 性</th>
<th>说 明</th>
</tr>
</thead>
<tbody>
<tr>
<td>Math.E</td>
<td>自然对数的底数，即常量e的值</td>
</tr>
<tr>
<td>Math.LN10</td>
<td>10的自然对数</td>
</tr>
<tr>
<td>Math.LN2</td>
<td>2的自然对数</td>
</tr>
<tr>
<td>Math.LOG2E</td>
<td>以2为底e的对数</td>
</tr>
<tr>
<td>Math.LOG10E</td>
<td>以10为底e的对数</td>
</tr>
<tr>
<td>Math.PI</td>
<td>π的值</td>
</tr>
<tr>
<td>Math.SQRT1_2</td>
<td>1/2的平方根（即2的平方根的倒数）</td>
</tr>
<tr>
<td>Math.SQRT2</td>
<td>2的平方根</td>
</tr>
</tbody>
</table>
<ul>
<li><p>min() 和 max() 方法<br>  这两个方法都可以接收任意多个数值参数，要查找数组中的最大值可以使用apply方法。</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.min(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>);</span><br><span class="line"><span class="keyword">var</span> values = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>];</span><br><span class="line"><span class="keyword">var</span> max = <span class="built_in">Math</span>.max.apply(<span class="built_in">Math</span>, values);</span><br></pre></td></tr></table></figure>
</li>
<li><p>舍入方法</p>
<ul>
<li>Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；</li>
<li>Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；</li>
<li>Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数</li>
</ul>
</li>
<li><p>random() 方法<br>  Math.random() 方法返回大于等于 0 小于 1 的一个随机数。套用下面的公式，就可以利用Math.random()从某个整数范围内随机选择一个值。 <code>值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)</code></p>
</li>
<li><p>其他方法</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>方 法</th>
<th>说 明</th>
</tr>
</thead>
<tbody>
<tr>
<td>Math.abs(num)</td>
<td>返回num 的绝对值</td>
</tr>
<tr>
<td>Math.exp(num)</td>
<td>返回Math.E 的num 次幂</td>
</tr>
<tr>
<td>Math.log(num)</td>
<td>返回num 的自然对数</td>
</tr>
<tr>
<td>Math.pow(num,power)</td>
<td>返回num 的power 次幂</td>
</tr>
<tr>
<td>Math.sqrt(num)</td>
<td>返回num 的平方根</td>
</tr>
<tr>
<td>Math.acos(x)</td>
<td>返回x 的反余弦值</td>
</tr>
<tr>
<td>Math.asin(x)</td>
<td>返回x 的反正弦值</td>
</tr>
<tr>
<td>Math.atan(x)</td>
<td>返回x 的反正切值</td>
</tr>
<tr>
<td>Math.atan2(y,x)</td>
<td>返回y/x 的反正切值</td>
</tr>
<tr>
<td>Math.cos(x)</td>
<td>返回x 的余弦值</td>
</tr>
<tr>
<td>Math.sin(x)</td>
<td>返回x 的正弦值</td>
</tr>
<tr>
<td>Math.tan(x)</td>
<td>返回x 的正切值</td>
</tr>
</tbody>
</table>
<ul>
<li>ES6新增方法</li>
</ul>
<table>
<thead>
<tr>
<th>方 法</th>
<th>说 明</th>
</tr>
</thead>
<tbody>
<tr>
<td>Math.trunc(num)</td>
<td>去除一个数的小数部分，返回整数部分，对于空值和无法截取整数的值，返回NaN</td>
</tr>
<tr>
<td>Math.sign(num)</td>
<td>判断一个数到底是正数、负数、还是零。参数为正数，返回+1； 参数为负数，返回-1； 参数为0，返回0； 参数为-0，返回-0; 其他值，返回NaN。</td>
</tr>
<tr>
<td>Math.cbrt(num)</td>
<td>计算一个数的立方根</td>
</tr>
<tr>
<td>Math.clz32(num)</td>
<td>返回一个数的32位无符号整数二进制形式表示有多少个前导0。对于小数，只考虑整数部分，对于其他值，先转为数值，再计算</td>
</tr>
<tr>
<td>Math.imul(num1,num2)</td>
<td>回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的带符号整数。多数情况和`(a * b)</td>
<td>0`效果相同，但JavaScript对于超过2的53次方的值无法精确表示，该方法可以得到正确值</td>
</tr>
<tr>
<td>Math.fround(num)</td>
<td>Math.fround方法返回一个数的单精度浮点数形式。对于整数来说，Math.fround方法返回结果不会有任何不同，区别主要是那些无法用64个二进制位精确表示的小数。这时，Math.fround方法会返回最接近这个小数的单精度浮点数。</td>
</tr>
<tr>
<td>Math.hypot()</td>
<td>返回所有参数的平方和的平方根，如果参数不是数值，Math.hypot方法会将其转为数值。只要有一个参数无法转为数值，就会返回NaN</td>
</tr>
<tr>
<td>Math.expm1()</td>
<td>返回Math.exp(x) - 1</td>
</tr>
<tr>
<td>Math.log1p()</td>
<td>返回1 + x的自然对数。如果x小于-1，返回NaN</td>
</tr>
<tr>
<td>Math.log10()</td>
<td>返回以10为底的x的对数。如果x小于0，则返回NaN</td>
</tr>
<tr>
<td>Math.log2()</td>
<td>返回以2为底的x的对数。如果x小于0，则返回NaN</td>
</tr>
<tr>
<td>Math.sinh(x)</td>
<td>返回x的双曲正弦（hyperbolic sine）</td>
</tr>
<tr>
<td>Math.cosh(x)</td>
<td>返回x的双曲余弦（hyperbolic cosine）</td>
</tr>
<tr>
<td>Math.tanh(x)</td>
<td>返回x的双曲正切（hyperbolic tangent）</td>
</tr>
<tr>
<td>Math.asinh(x)</td>
<td>返回x的反双曲正弦（inverse hyperbolic sine）</td>
</tr>
<tr>
<td>Math.acosh(x)</td>
<td>返回x的反双曲余弦（inverse hyperbolic cosine）</td>
</tr>
<tr>
<td>Math.atanh(x)</td>
<td>返回x的反双曲正切（inverse hyperbolic tangent）</td>
</tr>
</tbody>
</table>
<h2 id="Map">Map</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Map</span>([iterable])</span><br></pre></td></tr></table></figure>
<p>Map对象属性：size，映射中的元素数</p>
<p>Map对象方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>clear()</td>
<td>清除所有成员，没有返回值。</td>
</tr>
<tr>
<td>delete(key)</td>
<td>删除某个键，返回true。如果删除失败，返回false。</td>
</tr>
<tr>
<td>forEach(callbackfn[, thisArg])</td>
<td>对映射中的每个元素执行指定操作。</td>
</tr>
<tr>
<td>get(key)</td>
<td>读取key对应的键值，如果找不到key，返回undefined。</td>
</tr>
<tr>
<td>has(key)</td>
<td>返回一个布尔值，表示某个键是否在Map数据结构中。</td>
</tr>
<tr>
<td>set(key,value)</td>
<td>设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。</td>
</tr>
<tr>
<td>entries()</td>
<td>返回所有成员的Iterator对象。</td>
</tr>
<tr>
<td>keys()</td>
<td>返回键名的Iterator对象。</td>
</tr>
<tr>
<td>values()</td>
<td>返回键值的Iterator对象。</td>
</tr>
</tbody>
</table>
<h2 id="WeakMap">WeakMap</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">WeakMap</span>([iterable])</span><br></pre></td></tr></table></figure>
<p>WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null除外），不接受原始类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。</p>
<p>WeakMap的设计目的在于，键名是对象的弱引用（垃圾回收机制不将该引用考虑在内），所以其所对应的对象可能会被自动回收。当对象被回收后，WeakMap自动移除对应的键值对。典型应用是，一个对应DOM元素的WeakMap结构，当某个DOM元素被清除，其所对应的WeakMap记录就会自动被移除。基本上，WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。WeakMap结构有助于防止内存泄漏。</p>
<p>WeakMap只有四个方法可用：get()、set()、has()、delete()。</p>
<h2 id="Set">Set</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Set</span>([iterable])</span><br></pre></td></tr></table></figure>
<p>Set 实例属性size，返回元素个数</p>
<p>Set 实例方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>clear()</td>
<td>清除所有成员，没有返回值。</td>
</tr>
<tr>
<td>delete(value)</td>
<td>删除某个键，返回true。如果删除失败，返回false。</td>
</tr>
<tr>
<td>forEach(callbackfn[, thisArg])</td>
<td>对映射中的每个元素执行指定操作。</td>
</tr>
<tr>
<td>has(value)</td>
<td>返回一个布尔值，表示某个键是否在Set数据结构中。</td>
</tr>
<tr>
<td>add(value)</td>
<td>设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。</td>
</tr>
<tr>
<td>entries()</td>
<td>返回所有成员的Iterator对象。</td>
</tr>
<tr>
<td>keys()</td>
<td>返回键名的Iterator对象。</td>
</tr>
<tr>
<td>values()</td>
<td>返回键值的Iterator对象。</td>
</tr>
</tbody>
</table>
<p>entries，keys，values三个方法返回一样。</p>
<p>数组、Map、Set实例都有entries，keys，values这三个方法，都返回一个迭代器，实现了Iterable和Iterator接口。且其<code>Symbol.iterator</code>方法的返回值就是其本身</p>
<h2 id="WeakSet">WeakSet</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">WeakSet</span>([iterable])</span><br></pre></td></tr></table></figure>
<p>WeakSet结构与Set类似，也是不重复的值的集合。但是，它与Set有两个区别。</p>
<p>首先，WeakSet的成员只能是对象，而不能是其他类型的值。</p>
<p>其次，WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于WeakSet之中。这个特点意味着，无法引用WeakSet的成员，因此WeakSet是不可遍历的。</p>
<p>实例只有add，delete，has三个方法。</p>
<h2 id="Proxy">Proxy</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Proxy</span>(target, handler)</span><br></pre></td></tr></table></figure>
<p>Proxy对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，<code>new Proxy()</code>表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。</p>
<p>Proxy.revocable(target, handler)</p>
<table>
<thead>
<tr>
<th>处理程序方法（陷阱）语法</th>
<th>用法示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>apply: function(target, thisArg, args)</td>
<td>函数调用陷阱。</td>
</tr>
<tr>
<td>construct: function(target, args)</td>
<td>构造函数陷阱。</td>
</tr>
<tr>
<td>defineProperty: function(target, propertyName, descriptor)</td>
<td>Object.defineProperty 函数 (JavaScript) 陷阱。</td>
</tr>
<tr>
<td>deleteProperty: function(target, propertyName)</td>
<td>delete 语句的陷阱。</td>
</tr>
<tr>
<td>enumerate: function(target)</td>
<td>for…in 语句、Object.getOwnPropertySymbols、Object.keys 函数和 JSON.stringify 的陷阱。</td>
</tr>
<tr>
<td>get: function(target, propertyName, receiver)</td>
<td>任何 getter 属性的陷阱。</td>
</tr>
<tr>
<td>getOwnPropertyDescriptor: function(target, propertyName)</td>
<td>Object.getOwnPropertyDescriptor 函数 (JavaScript) 的陷阱。</td>
</tr>
<tr>
<td>getPrototypeOf: function(target)</td>
<td>Object.getPrototypeOf 函数 (JavaScript) 的陷阱。</td>
</tr>
<tr>
<td>has: function(target, propertyName)</td>
<td>in 运算符、hasOwnProperty 方法 (Object) (JavaScript) 和其他方法的陷阱。</td>
</tr>
<tr>
<td>isExtensible: function(target)</td>
<td>Object.isExtensible 函数 (JavaScript) 的陷阱。</td>
</tr>
<tr>
<td>ownKeys: function(target)</td>
<td>Object.getOwnPropertyNames 函数 (JavaScript) 的陷阱。</td>
</tr>
<tr>
<td>preventExtensions: function(target)</td>
<td>Object.preventExtensions 函数 (JavaScript) 的陷阱。</td>
</tr>
<tr>
<td>set: function(target, propertyName, value, receiver)</td>
<td>任何 setter 属性的陷阱。</td>
</tr>
<tr>
<td>setPrototypeOf: function(target, prototype)</td>
<td>Object.setPrototypeOf 的陷阱。</td>
</tr>
</tbody>
</table>
<h2 id="Reflect">Reflect</h2><p>Reflect 方法通常与Proxy一起使用，因为后者允许你委托默认行为而无需在代码中实现该默认行为。</p>
<p>Reflect 提供与每个代理陷阱具有相同名称的静态方法</p>
<p>Reflect函数清单如下。</p>
<ul>
<li>Reflect.getOwnPropertyDescriptor(target,name)</li>
<li>Reflect.defineProperty(target,name,desc)</li>
<li>Reflect.getOwnPropertyNames(target)</li>
<li>Reflect.getPrototypeOf(target) 读取对象的<code>__proto__</code>属性，等同于<code>Object.getPrototypeOf(obj)</code>。</li>
<li>Reflect.setPrototypeOf(obj, newProto) 设置对象的<code>__proto__</code>属性，注意，Object对象没有对应这个方法的方法。</li>
<li>Reflect.deleteProperty(target,name) 等同于<code>delete obj[name]</code>。</li>
<li>Reflect.enumerate(target)</li>
<li>Reflect.freeze(target)</li>
<li>Reflect.seal(target)</li>
<li>Reflect.preventExtensions(target)</li>
<li>Reflect.isFrozen(target)</li>
<li>Reflect.isSealed(target)</li>
<li>Reflect.isExtensible(target)</li>
<li>Reflect.has(target,name) 等同于<code>name in obj</code>。</li>
<li>Reflect.hasOwn(target,name)</li>
<li>Reflect.keys(target)</li>
<li>Reflect.get(target,name,receiver) 查找并返回target对象的name属性，如果没有该属性，则返回undefined。如果name属性部署了读取函数，则读取函数的this绑定receiver。</li>
<li>Reflect.set(target,name,value,receiver) 设置target对象的name属性等于value。如果name属性设置了赋值函数，则赋值函数的this绑定receiver。</li>
<li>Reflect.apply(target,thisArg,args) 等同于<code>Function.prototype.apply.call(fun,thisArg,args)</code>。一般来说，如果要绑定一个函数的this对象，可以这样写<code>fn.apply(obj, args)</code>，但是如果函数定义了自己的apply方法，就只能写成<code>Function.prototype.apply.call(fn, obj, args)</code>，采用Reflect对象可以简化这种操作。</li>
<li>Reflect.construct(target,args) 等同于<code>new target(...args)</code>，这提供了一种不使用new，来调用构造函数的方法。</li>
</ul>
<h2 id="Promise">Promise</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123; ... &#125;);</span><br></pre></td></tr></table></figure>
<p>Promise必须完成（返回一个值）或者必须被拒绝（返回一个原因）。Promise完成或被拒绝时（无论哪一个先发生），Promise 对象的 then 方法都会运行。如果承诺成功完成，则将运行 then 方法的履行处理程序函数。如果承诺被拒绝，则将运行 then 方法（或 catch 方法）的错误处理程序函数。</p>
<p>Promise对象有以下两个特点。</p>
<ol>
<li>对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。</li>
<li>一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。</li>
</ol>
<p>Promise函数</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Promise.all(iterable)</td>
<td>返回一个promise，该promise会在iterable参数内的所有promise都被解决后被解决。如果传入的可迭代数组中某项不是一个promise，该项会被用Promise.resolve转换为一个promise。如果任一传入的promise被拒绝了，all Promise立刻带着该promise的拒绝原因进入拒绝(rejected)状态，不再理会其它传入的promise是否被解决。</td>
</tr>
<tr>
<td>Promise.race(iterable)</td>
<td>返回一个promise，这个promise在iterable中的任意一个promise被解决或拒绝后，立刻以相同的解决值被解决或以相同的拒绝原因被拒绝。</td>
</tr>
<tr>
<td>Promise.reject(reason)</td>
<td>返回一个用reason拒绝的Promise</td>
</tr>
<tr>
<td>Promise.resolve(x)</td>
<td>返回一个以给定值resolve掉的Promise对象。但如果这个值是thenable的（就是说带有then方法），返回的promise会“追随”这个thenable的对象，接收它的最终状态（指resolved/rejected/pendding/settled）；否则这个被返回的promise对象会以这个值被fulfilled</td>
</tr>
</tbody>
</table>
<p>Promise对象方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>then(onFulfilled, onRejected)</td>
<td>返回一个Promise。它有两个参数，分别为Promise在 success 和 failure 情况下的回调函数</td>
</tr>
<tr>
<td>catch(onRejected)</td>
<td>只处理Promise被拒绝的情况，并返回一个Promise。该方法的行为和调用Promise.prototype.then(undefined, onRejected)相同</td>
</tr>
</tbody>
</table>
<h1 id="异步编程">异步编程</h1><p>异步编程对JavaScript语言很重要。JavaScript只有一个线程，如果没有异步编程，性能堪忧。</p>
<p>ES6之前，异步编程的方法，大概有下面四种。</p>
<ul>
<li>回调函数</li>
<li>事件监听</li>
<li>发布/订阅</li>
<li>Promise 对象</li>
</ul>
<h2 id="异步基本概念">异步基本概念</h2><p>所谓”异步”，简单说就好比把一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。</p>
<p>比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。</p>
<p>相应地，连续的执行就叫做同步。由于是连续执行，不能插入其他任务，所以操作系统从硬盘读取文件的这段时间，程序只能干等着。</p>
<h2 id="回调函数">回调函数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">fs.readFile(<span class="string">'/etc/passwd'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">err, data</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>上面代码中，readFile函数的第二个参数，就是回调函数，也就是任务的第二段。等到操作系统返回了<code>/etc/passwd</code>这个文件以后，回调函数才会执行。</p>
<h2 id="Promise-1">Promise</h2><p>回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。假定读取A文件之后，再读取B文件，代码如下。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">fs.readFile(fileA, <span class="function"><span class="keyword">function</span> (<span class="params">err, data</span>) </span>&#123;</span><br><span class="line">  fs.readFile(fileB, <span class="function"><span class="keyword">function</span> (<span class="params">err, data</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>上面回调函数会有多重嵌套，Promise允许将回调函数的横向加载，改成纵向加载。采用Promise，连续读取多个文件，写法如下。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> readFile = <span class="built_in">require</span>(<span class="string">'fs-readfile-promise'</span>);</span><br><span class="line"></span><br><span class="line">readFile(fileA)</span><br><span class="line">.then(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data.toString());</span><br><span class="line">&#125;)</span><br><span class="line">.then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> readFile(fileB);</span><br><span class="line">&#125;)</span><br><span class="line">.then(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data.toString());</span><br><span class="line">&#125;)</span><br><span class="line">.catch(<span class="function"><span class="keyword">function</span>(<span class="params">err</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>Generator函数是协程在ES6的实现，最大特点就是可以交出函数的执行权（即暂停执行）。</p>
<p>整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。</p>
<p>可以看到，虽然 Generator 函数将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。</p>
<p>Thunkify模块和co模块可以自动执行Generator函数</p>
<p>基于Promise对象的自动执行<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> readFile = <span class="function"><span class="keyword">function</span> (<span class="params">fileName</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span> (<span class="params">resolve, reject</span>)</span>&#123;</span><br><span class="line">    fs.readFile(fileName, <span class="function"><span class="keyword">function</span>(<span class="params">error, data</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">if</span> (error) reject(error);</span><br><span class="line">      resolve(data);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> gen = <span class="function"><span class="keyword">function</span>* (<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> f1 = <span class="keyword">yield</span> readFile(<span class="string">'/etc/fstab'</span>);</span><br><span class="line">  <span class="keyword">var</span> f2 = <span class="keyword">yield</span> readFile(<span class="string">'/etc/shells'</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(f1.toString());</span><br><span class="line">  <span class="built_in">console</span>.log(f2.toString());</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>然后，手动执行上面的Generator函数。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> g = gen();</span><br><span class="line"></span><br><span class="line">g.next().value.then(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">  g.next(data).value.then(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">    g.next(data);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<h2 id="async函数">async函数</h2><p>async函数现在是ES7的一个提案。上面例子写成 async 函数，就是下面这样。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> asyncReadFile = <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> f1 = <span class="keyword">await</span> readFile(<span class="string">'/etc/fstab'</span>);</span><br><span class="line">  <span class="keyword">var</span> f2 = <span class="keyword">await</span> readFile(<span class="string">'/etc/shells'</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(f1.toString());</span><br><span class="line">  <span class="built_in">console</span>.log(f2.toString());</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>一比较就会发现，async函数就是将Generator函数的星号（<code>*</code>）替换成async，将yield替换成await，仅此而已。</p>
<p>参考：</p>
<p><a href="http://bonsaiden.github.io/JavaScript-Garden/zh/" target="_blank" rel="external">JavaScript秘密花园</a></p>

      
    </div>
    <footer class="article-footer">
	  
	  <!-- 百度分享 Start -->
	  <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
	  <!-- 百度分享 End -->
	  
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

	  
<span>
Updated:<time datetime="2015-09-01T04:05:51.000Z" itemprop="dateModified">2015-09-01</time>
</span>


    </footer>
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="/2015/08/28/javascript-oop-function-expression-and-async/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JavaScript 面向对象程序设计、函数表达式和异步编程</div>
    </a>
  
</nav>

  
</article>



<!-- 多说评论框 start -->

<section id="comments">
  <div class="ds-thread"  data-thread-key="/2015/09/01/javascript-summary/" data-title="JavaScript 总结" data-url="http://howiefh.github.io/2015/09/01/javascript-summary/" id="ds_thread">
    <noscript>Please enable JavaScript to view the <a href="//duoshuo.com/?ref_noscript">comments powered by duoshuo.</a></noscript>
  </div>
</section>

<!-- 多说评论框 end -->
</section>
        
          
  <div id="toc" class="toc-aside">
  <h2 class="toc-title">Contents</h2>
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#变量"><span class="toc-number">1.</span> <span class="toc-text">变量</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#声明提升"><span class="toc-number">1.1.</span> <span class="toc-text">声明提升</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#数据类型"><span class="toc-number">2.</span> <span class="toc-text">数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#typeof"><span class="toc-number">2.1.</span> <span class="toc-text">typeof</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对象的类定义"><span class="toc-number">2.2.</span> <span class="toc-text">对象的类定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#undefined_&_null"><span class="toc-number">2.3.</span> <span class="toc-text">undefined & null</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#类型转换"><span class="toc-number">2.4.</span> <span class="toc-text">类型转换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Symbol"><span class="toc-number">2.5.</span> <span class="toc-text">Symbol</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Number"><span class="toc-number">2.6.</span> <span class="toc-text">Number</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#模板字符串"><span class="toc-number">2.7.</span> <span class="toc-text">模板字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#标签模板"><span class="toc-number">2.8.</span> <span class="toc-text">标签模板</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#操作符"><span class="toc-number">3.</span> <span class="toc-text">操作符</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6中的-"><span class="toc-number">3.1.</span> <span class="toc-text">ES6中的...</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#解构赋值"><span class="toc-number">3.2.</span> <span class="toc-text">解构赋值</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#语句"><span class="toc-number">4.</span> <span class="toc-text">语句</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#for-in"><span class="toc-number">4.1.</span> <span class="toc-text">for-in</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#with"><span class="toc-number">4.2.</span> <span class="toc-text">with</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#函数"><span class="toc-number">5.</span> <span class="toc-text">函数</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#函数声明和表达式"><span class="toc-number">5.1.</span> <span class="toc-text">函数声明和表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#没有重载"><span class="toc-number">5.2.</span> <span class="toc-text">没有重载</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#作为值的函数"><span class="toc-number">5.3.</span> <span class="toc-text">作为值的函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#arguments"><span class="toc-number">5.4.</span> <span class="toc-text">arguments</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this"><span class="toc-number">5.5.</span> <span class="toc-text">this</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#返回值"><span class="toc-number">5.6.</span> <span class="toc-text">返回值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#默认参数"><span class="toc-number">5.7.</span> <span class="toc-text">默认参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#rest参数"><span class="toc-number">5.8.</span> <span class="toc-text">rest参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#扩展运算符"><span class="toc-number">5.9.</span> <span class="toc-text">扩展运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#箭头函数"><span class="toc-number">5.10.</span> <span class="toc-text">箭头函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Generator_函数"><span class="toc-number">5.11.</span> <span class="toc-text">Generator 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#尾调用优化"><span class="toc-number">5.12.</span> <span class="toc-text">尾调用优化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#作用域"><span class="toc-number">5.13.</span> <span class="toc-text">作用域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#闭包"><span class="toc-number">5.14.</span> <span class="toc-text">闭包</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#模块"><span class="toc-number">6.</span> <span class="toc-text">模块</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#错误处理"><span class="toc-number">7.</span> <span class="toc-text">错误处理</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#垃圾回收"><span class="toc-number">8.</span> <span class="toc-text">垃圾回收</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#面向对象编程"><span class="toc-number">9.</span> <span class="toc-text">面向对象编程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#对象"><span class="toc-number">9.1.</span> <span class="toc-text">对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#属性类型"><span class="toc-number">9.1.1.</span> <span class="toc-text">属性类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对象使用和属性"><span class="toc-number">9.1.2.</span> <span class="toc-text">对象使用和属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#原型"><span class="toc-number">9.1.3.</span> <span class="toc-text">原型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建对象"><span class="toc-number">9.1.4.</span> <span class="toc-text">创建对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#class"><span class="toc-number">9.1.5.</span> <span class="toc-text">class</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#静态私有变量"><span class="toc-number">9.1.6.</span> <span class="toc-text">静态私有变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#模块模式"><span class="toc-number">9.1.7.</span> <span class="toc-text">模块模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#增强的模块模式"><span class="toc-number">9.1.8.</span> <span class="toc-text">增强的模块模式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#继承"><span class="toc-number">9.2.</span> <span class="toc-text">继承</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#原型链"><span class="toc-number">9.2.1.</span> <span class="toc-text">原型链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#继承方法"><span class="toc-number">9.2.2.</span> <span class="toc-text">继承方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#extends"><span class="toc-number">9.2.3.</span> <span class="toc-text">extends</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#原生类型"><span class="toc-number">10.</span> <span class="toc-text">原生类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Object"><span class="toc-number">10.1.</span> <span class="toc-text">Object</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array"><span class="toc-number">10.2.</span> <span class="toc-text">Array</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Date"><span class="toc-number">10.3.</span> <span class="toc-text">Date</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RegExp"><span class="toc-number">10.4.</span> <span class="toc-text">RegExp</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Function"><span class="toc-number">10.5.</span> <span class="toc-text">Function</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Boolean"><span class="toc-number">10.6.</span> <span class="toc-text">Boolean</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Number-1"><span class="toc-number">10.7.</span> <span class="toc-text">Number</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#String"><span class="toc-number">10.8.</span> <span class="toc-text">String</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Global"><span class="toc-number">10.9.</span> <span class="toc-text">Global</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Math"><span class="toc-number">10.10.</span> <span class="toc-text">Math</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Map"><span class="toc-number">10.11.</span> <span class="toc-text">Map</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WeakMap"><span class="toc-number">10.12.</span> <span class="toc-text">WeakMap</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Set"><span class="toc-number">10.13.</span> <span class="toc-text">Set</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WeakSet"><span class="toc-number">10.14.</span> <span class="toc-text">WeakSet</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Proxy"><span class="toc-number">10.15.</span> <span class="toc-text">Proxy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Reflect"><span class="toc-number">10.16.</span> <span class="toc-text">Reflect</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Promise"><span class="toc-number">10.17.</span> <span class="toc-text">Promise</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#异步编程"><span class="toc-number">11.</span> <span class="toc-text">异步编程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#异步基本概念"><span class="toc-number">11.1.</span> <span class="toc-text">异步基本概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#回调函数"><span class="toc-number">11.2.</span> <span class="toc-text">回调函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Promise-1"><span class="toc-number">11.3.</span> <span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#async函数"><span class="toc-number">11.4.</span> <span class="toc-text">async函数</span></a></li></ol></li></ol>
    
  </div>

<aside id="sidebar">

  
    
<div class="widget-wrap">
  <h3 class="widget-title">ABOUT ME</h3>
  <ul class="widget about-me">
    
    <li><img class="author" title="About me" src="http://fh-1.qiniudn.com/okal-eltocat.jpg" /></li>
    
    
    <li>Hi,I'm FengHao.</li>
    
    <li>I'll share something interesting and my learning experience with you at this blog.</li>
    
    <li>前博客:<a href="http://hi.baidu.com/idea_star" target="_BLANK">百度空间</a></li>
    
  </ul>
</div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Android/">Android</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/C/">C</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Database/">Database</a><span class="category-list-count">13</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/MongoDB/">MongoDB</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Database/MySQL/">MySQL</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Eclipse/">Eclipse</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/FTP/">FTP</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Hexo/">Hexo</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a><span class="category-list-count">20</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Java/FreeMarker/">FreeMarker</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/Shiro/">Shiro</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/">JavaEE</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/Hibernate/">Hibernate</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/JSP/">JSP</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/Spring/">Spring</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/jQuery/">jQuery</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/PHP/">PHP</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Suse/">Suse</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Ubuntu/">Ubuntu</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vim/">Vim</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/编程/">编程</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/软件/">软件</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Android/" style="font-size: 14.75px; color: #65bfa7">Android</a> <a href="/tags/C/" style="font-size: 13.88px; color: #71c1c2">C</a> <a href="/tags/CAS/" style="font-size: 13px; color: #7dc3de">CAS</a> <a href="/tags/Chrome/" style="font-size: 13px; color: #7dc3de">Chrome</a> <a href="/tags/Clean-Code/" style="font-size: 13.88px; color: #71c1c2">Clean Code</a> <a href="/tags/Database/" style="font-size: 13px; color: #7dc3de">Database</a> <a href="/tags/Eclipse/" style="font-size: 13px; color: #7dc3de">Eclipse</a> <a href="/tags/FTP/" style="font-size: 13.88px; color: #71c1c2">FTP</a> <a href="/tags/FreeMarker/" style="font-size: 14.75px; color: #65bfa7">FreeMarker</a> <a href="/tags/Gcc/" style="font-size: 13px; color: #7dc3de">Gcc</a> <a href="/tags/Git/" style="font-size: 14.75px; color: #65bfa7">Git</a> <a href="/tags/Github-Pages/" style="font-size: 13px; color: #7dc3de">Github Pages</a> <a href="/tags/Hexo/" style="font-size: 14.75px; color: #65bfa7">Hexo</a> <a href="/tags/Hibernate/" style="font-size: 13px; color: #7dc3de">Hibernate</a> <a href="/tags/JSP/" style="font-size: 13px; color: #7dc3de">JSP</a> <a href="/tags/JVM/" style="font-size: 14.75px; color: #65bfa7">JVM</a> <a href="/tags/Java/" style="font-size: 14.75px; color: #65bfa7">Java</a> <a href="/tags/JavaMail/" style="font-size: 13px; color: #7dc3de">JavaMail</a> <a href="/tags/JavaScript/" style="font-size: 16.5px; color: #4dbc6f">JavaScript</a> <a href="/tags/Linux/" style="font-size: 13.88px; color: #71c1c2">Linux</a> <a href="/tags/Log/" style="font-size: 13px; color: #7dc3de">Log</a> <a href="/tags/Markdown/" style="font-size: 13.88px; color: #71c1c2">Markdown</a> <a href="/tags/MongoDB/" style="font-size: 20px; color: #1db400">MongoDB</a> <a href="/tags/MySQL/" style="font-size: 13.88px; color: #71c1c2">MySQL</a> <a href="/tags/PHP/" style="font-size: 16.5px; color: #4dbc6f">PHP</a> <a href="/tags/Rhythmbox/" style="font-size: 13px; color: #7dc3de">Rhythmbox</a> <a href="/tags/SSO/" style="font-size: 13px; color: #7dc3de">SSO</a> <a href="/tags/Servlet/" style="font-size: 13px; color: #7dc3de">Servlet</a> <a href="/tags/Shiro/" style="font-size: 13.88px; color: #71c1c2">Shiro</a> <a href="/tags/Spring/" style="font-size: 13.88px; color: #71c1c2">Spring</a> <a href="/tags/Suse/" style="font-size: 13px; color: #7dc3de">Suse</a> <a href="/tags/Thinking-in-Java/" style="font-size: 19.13px; color: #29b61c">Thinking in Java</a> <a href="/tags/Ubuntu/" style="font-size: 17.38px; color: #41ba53">Ubuntu</a> <a href="/tags/Vim/" style="font-size: 18.25px; color: #35b838">Vim</a> <a href="/tags/VirtualBox/" style="font-size: 13px; color: #7dc3de">VirtualBox</a> <a href="/tags/Vsftpd/" style="font-size: 13px; color: #7dc3de">Vsftpd</a> <a href="/tags/jQuery/" style="font-size: 13px; color: #7dc3de">jQuery</a> <a href="/tags/pam-mysql/" style="font-size: 13px; color: #7dc3de">pam_mysql</a> <a href="/tags/小米/" style="font-size: 13px; color: #7dc3de">小米</a> <a href="/tags/软件/" style="font-size: 15.63px; color: #59bd8b">软件</a>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/09/">September 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/07/">July 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/05/">May 2015</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/04/">April 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/02/">February 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/09/">September 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/08/">August 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/07/">July 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/06/">June 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">11</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/04/">April 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>


  
    <div class="widget-wrap">
  <h3 class="widget-title">Calendar</h3>
  <div class="widget">
    <div id="g-calendar" class="g-calendar">
        <span class="g-calendar-prev"></span>
		 
        <span class="g-calendar-back"></span>
        <span class="g-calendar-now"></span>
		 
        <span class="g-calendar-next"></span>
        <div class="g-calendar-hd"></div>
        <div class="g-calendar-tit"></div>
        <div class="g-calendar-bd"></div>
    </div>
  </div>
</div>
<script type="text/javascript">
function LGY_calendar(wrapId, options){
    this.oWrap = this.getId(wrapId);
    this.oHead = this.getByClassName('g-calendar-hd',this.oWrap)[0];
    this.oBody = this.getByClassName('g-calendar-bd',this.oWrap)[0];
    this.oTit = this.getByClassName('g-calendar-tit',this.oWrap)[0];
    this.oPrev = this.getByClassName('g-calendar-prev',this.oWrap)[0];
    this.oNext = this.getByClassName('g-calendar-next',this.oWrap)[0];
    this.oNow = this.getByClassName('g-calendar-now',this.oWrap)[0];
    this.oBack = this.getByClassName('g-calendar-back',this.oWrap)[0];
    this.init();
}
LGY_calendar.prototype = {
    ///////////获取ID元素
    getId:function(id){
        return document.getElementById(id);
    },
    ////////获取css类名元素
    getByClassName:function(className,parent){
        var elem = [],
            node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
            p = new RegExp("(^|\\s)"+className+"(\\s|$)");
        for(var n=0,i=node.length;n<i;n++){
            if(p.test(node[n].className)){
                elem.push(node[n]);
            }
        }
        return elem;
    },
    //填充日历
    fillDate:function(year,month){
        //本月份第一天是星期几-为显示上个月的天数做铺垫
        var first_day = new Date(year,month,1).getDay(),
        //如果刚好是星期天，则空出一行（显示上个月的天数）
            first_day = first_day == 0?first_day=7:first_day;
        //本月份最后一天是几号
        var final_date = new Date(year,month+1,0).getDate(),
        //上个月的最后一天是几号
            last_date = new Date(year,month,0).getDate(),
        //剩余的格子数--即排在末尾的格子数
            surplus = 42 - first_day - final_date;
        //设置年的链接
        var yearHead = "<a href='/" + "archives/" + year + "/'>" + year + " "+ "</a>"; 
        //设置年的链接
        var monthHead = "";
        var month1 = month + 1;
        if (month1 < 10) {
            monthHead = "<a href='/" + "archives/" + year + "/" + "0" + month1 + "/'>" + " " + month1 + " " + "</a>";
        } else {
            monthHead = "<a href='/" + "archives/" + year + "/" + month1 + "/'>" + " " + month1 + " " + "</a>";
        }
        //设置表头的日历
        this.oHead.innerHTML = yearHead+'年'+monthHead+'月';
        //填充日历执行
        var html = '';
        //上个月的显示天数
        for(var i=0;i<first_day;i++){
            html+='<span class="g-calendar-grey">'+(last_date-(first_day-1)+i)+'</span>';
        }
        //本月的显示天数
        var postdate = new Date("Tue Sep 01 2015 10:22:17 GMT+0800"); 
        if (true && postdate.getFullYear() == year && postdate.getMonth() == month) { 
            html += '<span><a href="/2015/09/01/javascript-summary/" title="JavaScript 总结">1</a></span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span>';
        } else {
            for(var j=0;j<final_date;j++){        
                html+='<span id="d'+(j+1)+'">'+(j+1)+'</span>';
            }
        }
        //下个月的显示天数
        for(var k=0;k<surplus;k++){
            html+='<span class="g-calendar-grey">'+(k+1)+'</span>';
        }
        //fill
        this.oBody.innerHTML = html;
        // 当前状态
        if(year==this.c_year&&this.c_month==month){
            this.oBody.getElementsByTagName('span')[first_day+this.date-1].className='g-calendar-on';
        }

        // 对所有文章遍历,然后将有文章的日期加上链接,如果文章太多的话,生成页面会很大,去掉了
        
    },
    // next切换
    next:function(){
        var _that = this;
        this.oNext.onclick = function(){
            _that.month++;
            if(_that.month>11){
                _that.month = 0;
                _that.year++;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        };
    },
    // back 切换
    back:function(){
        var _that = this;
        if(this.oBack != undefined) {
            this.oBack.onclick = function(){
                var postdate = new Date("Tue Sep 01 2015 10:22:17 GMT+0800"); 
                _that.year = postdate.getFullYear();
                _that.month = postdate.getMonth();
                // 填充日历
                _that.fillDate(_that.year,_that.month);
            };
        }
    },
    // now切换
    now:function(){
        var _that = this;
        if(this.oNow != undefined ) {
            this.oNow.onclick = function(){
                var nowDate = new Date(); 
                _that.year = nowDate.getFullYear();
                _that.month = nowDate.getMonth();
                // 填充日历
                _that.fillDate(_that.year,_that.month);
            };
        }
    },
    // prev切换
    prev:function(){
        var _that = this;
        this.oPrev.onclick = function(){
            _that.month--;
            if(_that.month<0){
                _that.month = 11;
                _that.year--;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        };
    },
    init:function(){
        this.oTit.innerHTML = '<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>';
        // 获取今天的日历时间
        var now = new Date();
        this.c_year = this.year = now.getFullYear();
        this.c_month = this.month = now.getMonth();
        this.date = now.getDate();
        // 初始化--填充日历
        this.fillDate(this.year,this.month);
        //next切换
        this.next();
        //prev切换
        this.prev();
        //back 切换
        this.back();
        //now 切换
        this.now();
    }
}
new LGY_calendar('g-calendar');
</script>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2015/09/01/javascript-summary/">JavaScript 总结</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-oop-function-expression-and-async/">JavaScript 面向对象程序设计、函数表达式和异步编程</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-reference-type/">JavaScript 引用类型</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-grammar/">JavaScript 基本语法</a>
          </li>
        
          <li>
            <a href="/2015/08/10/java-web/">Java Web 笔记</a>
          </li>
        
      </ul>
    </div>
  </div>


  
    
<div class="widget-wrap">
  <h3 class="widget-title">Recent Comments</h3>
  <ul class="widget ds-recent-comments" data-num-items="5" data-show-avatars="0" data-show-title="1" data-show-time="1"></ul>
</div>
<!-- 需要多说的公用代码 -->


  

</aside>

        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2015 howiefh<br>
      Powered by <a href="http://zespia.tw/hexo/" target="_blank">Hexo</a> and Theme by <a href="https://github.com/howiefh/hexo-theme-landscape-f" target="_blank" title="Landscape-F">Landscape-F</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<!-- 多说公共JS代码 start (一个网页只需插入一次) -->

<script type="text/javascript">
  var duoshuoQuery = {short_name:"howiefh"};
  (function() {
	var ds = document.createElement('script');
	ds.type = 'text/javascript';ds.async = true;
	ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
	ds.charset = 'UTF-8';
	(document.getElementsByTagName('head')[0] 
		|| document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script> 

<!-- 多说公共JS代码 end -->

<!-- 百度分享 start -->

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":["mshare","douban","bdysc","sqq","qq","hi","baidu","huaban","youdao","sdo","mail","xg","diandian","fx","copy","print"],"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

<!-- 百度分享 end -->

<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/jquery.min.js"></script>
-->
<script src="/js/jquery.min.js" type="text/javascript"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
  <script src="/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>


<div class="bottom-btn">

	<a class="icon-gotop" href="javascript:void(0)" title="返回顶部"></a>
	<script src="/js/gotop.js" type="text/javascript"></script>
	<!--
	<script src="/js/gotop.js"></script>
	-->


	<a class="icon-toc-toggle" href="javascript:void(0)" title="文章目录"></a>
	<!--
	<script src="/js/toc_aside_toggle.js"></script>
	-->

</div>
<script src="/js/toc_aside_toggle.js" type="text/javascript"></script>


<script src="/js/script.js" type="text/javascript"></script>

  </div>
</body>
</html>
